Default ArrowUp and ArrowDown behavior not working if specified in `keyBindingFn`

[DaniloNovakovic]

Do you want to request a feature or report a bug?

Bug(?)

What is the current behavior?

If I return anything for ArrowDown or ArrowUp event key inside keyBindingFn then the default up and down arrow keys behavior won't work (even though there isn't any command handler for those commands)

  const keyBindingFn: KeyBindingFn = useCallback(
    (event) => {
      switch (event.key) {
        case 'Esc':
        case 'Escape':
          return 'escape';
        case 'Tab':
          return 'tab';
        case 'ArrowUp':
          return 'arrow-up';
        case 'ArrowDown':
          return 'arrow-down';
        default:
          return getDefaultKeyBinding(event);
      }
    },
    [keyBindingFn],
  );

But if I do something like this:

  const keyBindingFn: KeyBindingFn = useCallback(
    (event) => {
      switch (event.key) {
        case 'Esc':
        case 'Escape':
          return 'escape';
        case 'Tab':
          return 'tab';
        case 'ArrowUp':
          if (
            handleKeyCommand('arrow-up', editorState, event.timeStamp) ===
            'handled'
          ) {
            event.preventDefault();
          }
          return null;
        case 'ArrowDown':
          if (
            handleKeyCommand('arrow-down', editorState, event.timeStamp) ===
            'handled'
          ) {
            event.preventDefault();
          }
          return null;
        default:
          return getDefaultKeyBinding(event);
      }
    },
    [keyBindingFn, handleKeyCommand, editorState],
  );

then they work.

Also using the onDownArrow and onUpArrow events works as well (as long as I don't return anything inside keyBindingFn), but then I get annoying deprecation warning :(

What is the expected behavior?

I would expect that returning a custom command for ArrowUp and ArrowDown would still maintain default browser/arrow behaviour unless the command is handled (ex. handleKeyCommand returned handled)

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

I'm using "draft-js": "^0.11.7",

[joacub]

same here

[GouthamJM]

we are also facing the same issue