How to avoid a key from doing it's intended action?

[dbaonguis-wfc]

I am trying to prevent the user from pressing the arrow keys. I wrote a function that I call in the onKeyDownPress of a <KeyboardFocusView>.

const onExternalKeyDownPress = useCallback((e: OnKeyPress) => {
  // arrow keys => Up (19), Down (20), Left (21), right (22)
  const arrowKeyCodes = [19, 20, 21, 22];
  const { nativeEvent } = e;
  if (arrowKeyCodes.includes(nativeEvent.keyCode)) {
    console.log('---> nativeEvent.keyCode: ', nativeEvent.keyCode);
    e.preventDefault();
    e.stopPropagation();
  }
}, []);

...then I call the above function like below...

<KeyboardFocusView autoFocus onKeyDownPress={onExternalKeyDownPress}>
  {children here with other component wrapped in <KeyboardFocusView>}
</KeyboardFocusView>

I can see the console.log printing, but it does not seem to call preventDefault() or stopPropagation(). How can I make this work?

[ArturKalach]

Hello @dbaonguis-wfc,

Unfortunately, we currently don't have such functionality. Even though it looks simple, it is related to the keyboard focus order, and the implementation could vary and be really complex on the native side.

Regarding onKeyDownPress, it only fires notifications about key presses.

I am planning to add some functionality related to the keyboard focus order and focus navigation prevention, but it is a really complex task, and I haven't been able to find the time for it yet — and probably won't in the near future.

Regards,
Artur Kalach

[dbaonguis-wfc]

Hi Artur,

Thanks for your reply. I also notice you are woking on this: https://github.com/ArturKalach/react-native-a11y-order, which is very interesting and will be helpful to projects that require heavy support of accessibility.

Regards,
Donato

[ArturKalach]

Hello @dbaonguis-wfc,

I would like to share that I have achieved some results in understanding the 'focus lock and order' issue. It might take some time to polish, but I plan to share these features in an alpha version within one or two weeks. I hope it will help you with your problem.

Regards,
Artur Kalach

[ArturKalach]

Hello @dbaonguis-wfc,

I finally implemented a range of functionality for advanced focus control. You can learn more about it in the pre-release: https://github.com/ArturKalach/react-native-external-keyboard/releases/tag/v0.6.0-rc.

After some testing and refactoring, I plan to release it. You can try the following example:

lockFocus={[`up`,`down`,`right`, `left`]} 

This setup helps achieve the expected behavior you described above.

Regards,
Artur Kalach