SolidJS•4mo ago

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

1 Reply

Eluded•4mo ago

Turns out I just had to call event.stopPropagation. Noob mistake 🙂

Gaming

Programming

createShortcut callbacks fire even if a textinput has focus