How could I combine react-hotkeys-hook with focused input element?

[richardnguyen99]

I have a scenario that react-hotkeys-hook doesn't work properly when a page has an input element. For example, my App.tsx:

const App: React.FC = () => {
  const newTerminalHotKey = "ctrl+alt+t";

  const { addModal } = useModal();

  useHotkeys(
    newTerminalHotKey,
    () => {
      const id = crypto.getRandomValues(new Uint32Array(1))[0].toFixed(0);
      console.log("New Terminal", id);

      addModal({
        id,
        title: "Terminal",
        type: "terminal",
        active: true,

        isFullScreen: false,
        isFullScreenAllowed: true,
      });
    },
    {
      document,
    },
  );

  return (
    <>
      <Screen />
    </>
  );
};

If there is no modal, this works just fine. However, one of my modal types has an input element. When there is one modal with an input element, hotkeys don't work anymore. My temporary fix is to click outside, unfocus the input and set the modal to inactive. However, there are some operations that requires the modal to be active such as closing, maximizing, etc.

How can I simply use hotkeys while input elements are being focused? Thanks

[hasib-devs]

I'm experiencing a recurring issue wherein Input or Textarea fields become unresponsive while typing.

[JohannesKlauss]

What do you mean by unresponsive? Can you create a reproducible to illustrate the problem?