Intercept keydown event on input element

Question

I have a multipage form that is composed of <input /> fields. Alongside the form I have a collection of "hotkeys" that are implemented via a custom hook (window.attachEventListener("keydown", handler) that listen for an Alt + Key combination. e.g. Alt + N will navigate to the next page of the form)

The issue I am having is that if the user has focus on an <input /> and then attempts to fire the hotkey (Alt + N), the <input /> is still receiving the ˜ character before triggering the hotkey.

I have tried to use capture mode, event.preventDefault(), event.stopPropagation() and event.stopImmediatePropagation() to no avail. Is there a way I can prevent the <input /> elements in the form from receiving the Alt + Key keystroke?

useHotkey hook

export const useHotkey = (key: HotkeyTrigger, onTrigger: () => void) => {
  useEffect(() => {
    const handleTriggerKey = (event: KeyboardEvent) => {
      if (event.altKey && event.code === `Key${key}`) {
        // event.preventDefault();
        // event.stopPropagation();
        // event.stopImmediatePropagation();
        onTrigger();
      }
    };

    window.addEventListener("keydown", handleTriggerKey);

    return () => {
      window.removeEventListener("keydown", handleTriggerKey);
    };
  }, [key, onTrigger]);
};

EDIT: Codesandbox

Can you add a bit of input code that can help in reproducing this issue? — poo, May 10 '22 at 05:36
I have tried the codesandbox you've linked and nothing is sent to the input by the `Alt+n` combination. It seems to work fine. Tested in Firefox and Chrome on Mac and win 10. — Vočko, May 10 '22 at 07:03

score 0 · Accepted Answer · answered May 10 '22 at 06:52

I have a workaround for you, remove the focus from the input when you use the hotKeys.

export const useHotkey = (
  key: string,
  onTrigger: () => void,
  document: any // Add this parameter 
) => {
  useEffect(() => {
    const handleTriggerKey = (event: KeyboardEvent) => {
      if (event.altKey && event.code === `Key${key}`) {
        document.getElementsByTagName("input")[0].blur();//Add this line
        onTrigger();
      }
    };

    window.addEventListener("keydown", handleTriggerKey);

    return () => {
      window.removeEventListener("keydown", handleTriggerKey);
    };
  }, [key, onTrigger]);
};

and the call your function as follows:

useHotkey("N", () => console.log("Triggered"), document);

I hope this should resolve the issue for you.

This works great, thank you! I needed to adjust it to blur all inputs, since the index of the input that is focussed would be unknown, so I ended up with the following: [...document.getElementsByTagName("input")].forEach((input) => input.blur()); — braydend, May 10 '22 at 07:28

Intercept keydown event on input element

1 Answers1