Dealing with precedence / bubbling / scopes, prevent calling previous function with same key

[joepio]

I'm working on a text editor using this library (I absolutely love the API, btw), but I'm having some issues with re-using the same keys for different purposes.

In the editor, I want to use the arrow keys for navigation, but if the user starts typing a special character, I want to use the arrow keys to navigate a menu. What currently happens, is that both commands are executed. I was kind of hoping that e.preventDefault() would prevent this, since that is the default browser system for dealing with precedence / event bubbling.

Some possible directions for solutions:

• Make the e.preventDefault() work, if that is possible?
• Add a preventsOtherAction boolean
• Use the component depth, always prefer the deepest nested components.
• Add an optional precendence integer to the hook opts, when two are in conflict only the highest wins.

or maybe there already is a solution for this?

Thanks!

[JohannesKlauss]

Hi @joepio sorry for the late reply.

Did you try assigning the returned ref to the specific area? This way only if the assigned area receives a focus by the user the hotkey is active in this area.

Example here:
https://codesandbox.io/s/beautiful-snow-zlorf?file=/src/App.js

[JohannesKlauss]

Closing this due to inactivity. If the problem persist, pls let me know.