How to prevent quill mention triggering "Enter" on keyDown event handler?

[jaypeetancero]

Hello I want to prevent quill mention triggering the "Enter" keyCode in the keyDown listener after selecting item in the list.

What's happening here is when user press enter in the mention list it's automatically sending the message to the server which is not correct.

Is there a way or another approach to resolve my issue?

const editorRef = useRef();
const [editorVal, setEditorVal] = useState('');

const modules = useMemo(
    () => ({
      toolbar: [['bold'], [{ color: [] }]],
      clipboard: {
        matchVisual: false,
      },
      mention: {
        mentionDenotationChars: ['@'],
        source: (searchTerm, renderList) => {
          let values = [{id: 1, value: "Jefferson"},{id: 2, value: "Martys"},]
          if (searchTerm.length === 0) {
            renderList(values, searchTerm);
          } else {
            const matches: any = [];
            for (let i = 0; i < values.length; i++)
              if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
            renderList(matches, searchTerm);
          }
        },
      },
    }),
    []
  );

const formats = [
    'bold',
    'list',
    'bullet',
    'indent',
    'mention',
    'color',
  ];

  const handleSubmit = async () => {
    await sendMessage(editorVal)
  };

const handleKeyDown = e => {
   if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        handleSubmit();
      }
  };

return (
    <ReactQuill
      ref={editorRef}
      value={editorVal}
      placeholder="Aa"
      onChange={e => setEditorVal(e)}
      onKeyDown={handleKeyDown }
      modules={modules}
      formats={formats}
      theme="bubble"
    />
  );

[GitHubish]

@jaypeetancero you can use Quill-Mention's callback to find out if the dropdown is open or closed in order to know if you can make the submit.

const modules = useMemo(
    () => ({
      toolbar: [['bold'], [{ color: [] }]],
      clipboard: {
        matchVisual: false,
      },
      mention: {
        mentionDenotationChars: ['@'],
        onOpen: () => {
           //Set dropdownOpen
        },
        onClose: () => {
           //Set dropdownOpen
        },
        source: (searchTerm, renderList) => {
          let values = [{id: 1, value: "Jefferson"},{id: 2, value: "Martys"},]
          if (searchTerm.length === 0) {
            renderList(values, searchTerm);
          } else {
            const matches: any = [];
            for (let i = 0; i < values.length; i++)
              if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
            renderList(matches, searchTerm);
          }
        },
      },
    }),
    []
  );

const handleKeyDown = e => {
   if (e.key === 'Enter' && !e.shiftKey && !dropdownOpen) {
        e.preventDefault();
        handleSubmit();
      }
  };

Hoping that this helps you

[jaypeetancero]

@GitHubish , Thank you for your comment. I tried your code but still didn't work but what I did is instead of using onOpen and onClose props, I use the onSelect props available then I imitate your idea to set if user selected an data in the list here's the code for others to check

const modules = useMemo(
    () => ({
      toolbar: [['bold'], [{ color: [] }]],
      clipboard: {
        matchVisual: false,
      },
      mention: {
        mentionDenotationChars: ['@'],
        onOpen: () => {
          toggleMentionList(false);
        },
        onClose: () => {
          toggleMentionList(true);
        },
        onSelect: (item, insertItem) => {
          toggleMentionList(true);
          insertItem(item);
        },
        source: (searchTerm, renderList) => {
          let values = [{id: 1, value: "Jefferson"},{id: 2, value: "Martys"},]
          if (searchTerm.length === 0) {
            renderList(values, searchTerm);
          } else {
            const matches: any = [];
            for (let i = 0; i < values.length; i++)
              if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
            renderList(matches, searchTerm);
          }
        },
      },
    }),
    []
  );

const handleKeyDown = e => {
   if (e.key === 'Enter' && !e.shiftKey && !isMentionListOpen) {
        e.preventDefault();
        handleSubmit();
      }
  } else if (e.key === 'Enter'){
       toggleMentionList(false)
}

Thank you for the idea

[omgoshjosh]

bump?? let me just say i have had trouble getting the keydown to recognize the "isMentionListOpen" state correctly. what happens for me is that the state setters set the value to closed before the keydown function runs, so it still goes through.

what worked for me was putting a timeout on the state setter in the onClose so that it wouldn't set the state to closed before the enter keydown handler ran.

[rushi-visilean]

This solved my problem too. Putting my code down for more reference.

` const [isRenderItemOpen, setIsRenderItemOpen] = useState(false);

		mention: {
                            onOpen: () => {
				setIsRenderItemOpen(true);
			},
			onClose: () => {
				setTimeout(() => {
					setIsRenderItemOpen(false);
				}, 100);
			},
		}
		
		const handleKeyDown = (event: any) => {
	             if (event.key === 'Enter' && event.shiftKey) {
		          event.preventDefault();
	       	          quillRef?.current?.getEditor().insertText(quillRef.current.getEditor().getSelection()?.index || 0, '\n');
	             }
	              else if (event.key === 'Enter' && !isRenderItemOpen) {
		     event.preventDefault();
		    handleMessageUpdate();
	           }
            	};


	             <ReactQuill
				key={isToolbarOpen ? TOOLBAR_KEY_WITH : TOOLBAR_KEY_WITHOUT}
				className={`${classes['react-quill-custom-class']}`}
				value={text}
				onChange={handleChange}
				modules={modules}
				placeholder={t('quill.placeholder_text')}
				ref={el => {
					if (el) quillRef.current = el;
				}}
				onKeyDown={handleKeyDown}
			/>

`

[hieutadev]

This is how I handle it:

const Mention = Quill.import('modules/mention');
class CustomMention extends Mention {
  hideMentionList() {
    this.options.onBeforeClose();
    this.mentionContainer.style.display = 'none';
    this.mentionContainer.remove();
    this.quill.root.removeAttribute('aria-activedescendant');
    setTimeout(() => this.setIsOpen(false), 0);
  }
}
Quill.register('modules/mention', CustomMention, true);

const handleKeyDown = (e: React.KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey && ref.current) {
    const editor = ref.current.getEditor();
    const isOpenMention = Boolean(editor.getModule('mention')?.isOpen);
    if (isOpenMention) return;
    // do something...
  }
};