S
SolidJS4mo ago
Eluded

createShortcut callbacks fire even if a textinput has focus

I'm making a todo app which has vim motions for navigation. When I hit 'j' or 'k' i'd like these keys to jump to the next/prev todo item and select it. Currently this is implemented using createShortcut https://primitives.solidjs.community/package/keyboard#createShortcut from the keyboard primitive package.
createShortcut(
Bindings[HotKeys.NEXT_ITEM],
() => {
setSelectedIndex(Math.min(selectedIndex() + 1, tasks.length - 1));
console.log("Next item", selectedIndex());
},
{ preventDefault: true, requireReset: true }
);
createShortcut(
Bindings[HotKeys.NEXT_ITEM],
() => {
setSelectedIndex(Math.min(selectedIndex() + 1, tasks.length - 1));
console.log("Next item", selectedIndex());
},
{ preventDefault: true, requireReset: true }
);
However I've noticed that this event still fires even if a textinput element of one of the todos has focus. When text is being edited and a textinput has focus, I don't want these shortcuts to be triggered. How could this be achieved?
Solid Primitives
A library of high-quality primitives that extend SolidJS reactivity
No description
1 Reply
Eluded
Eluded4mo ago
Turns out I just had to call event.stopPropagation. Noob mistake 🙂