Up/Down Arrow Keys Not Working on mention-plugin after altering key bindings.

Hi all, I’m quite new to Draft JS /Draft JS Plugins and been trying to figure out what’s causing this. Originally what I wanted to happen is to alter the key-bindings of the editor to make the “Enter” key return a custom “submit-comment” event then assign Shift+Enter key to return a ‘split-block’ of which creates a new line or block. I was able to pull through with this code:

const handkekeyBindings = (e: SyntheticKeyboardEvent) => {
    if (e.key === "Enter") {
      if (e.nativeEvent.shiftKey) {
        return "split-block";
      } else {
        return "submit-comment";
      }
    }
    return getDefaultKeyBinding(e);
  };

I applied the key-bindings handler to my Editor Component:

<Editor
   editorState={editorState}
   onChange={handleEditorStateChange}
    keyBindingFn={handkekeyBindings}
    handleKeyCommand={handleKeyEvent}
    plugins={plugins}
 />

However, after altering the key-bindings of the editor , I can’t seem to use the UP/DOWN Arrow keys anymore to select any of the suggestions that would pop-out on the mentions.

Any Ideas on this one? I may perhaps messed up on something. Thanks!

[Vodzo]

Found a workaround for this exact issue I was having. The idea is to remove bindings while the suggestions popup is open and apply it again when closed.

const keyBinding = () => (e: React.KeyboardEvent): string | null => {
  if (e.key === "Enter") {
    if (e.nativeEvent.shiftKey) {
      return "split-block";
    } else {
      return "submit-comment";
    }
  }
  return getDefaultKeyBinding(e);
};

const SomeComponent = () => {
  /* default keyBinding */
  const [stateKeyBinding, setStateKeyBinding] = useState(keyBinding);

  const removeBinding = () => {
    setStateKeyBinding(undefined);
  };

  const applyBinding = () => {
    setStateKeyBinding(keyBinding);
  };

  return (
    <>
    <Editor 
      /* other props */
      keyBindingFn={stateKeyBinding}
    />
    <MentionSuggestions
      /* other props */
      onOpen={removeBinding}
      onClose={applyBinding}
    />
    </>
  )
}

Hope this helps your use case too!

[upworker00852]

Hello. I need to popup a modal when clicking a selected mention. Would you please help me? Thanks