[BUG] useHotkeys Triggers Incorrectly when in Fullscreen Mode

[Innei]

Problem:
When using useHotkeys to switch to fullscreen mode, there seems to be a chaining key problem. For instance, I've defined a hotkey f to enter fullscreen mode:

useHotkeys(
    'f',
    (event, hotkeys) => {
      console.log(event, hotkeys);
      document.documentElement.requestFullscreen().then(() => {});
    },
    {
      enabled: true,
    },
);

I've also defined another hotkey a to increment a counter:

useHotkeys('a', () => setCount(count + 1));

The issue arises when I press the f key to switch to fullscreen mode. If I quickly press another key (even if it's not f), it mistakenly assumes the f key was pressed and triggers the f key event handler. Interestingly, the event parameter's key is not f.

Maybe I am not clear, but please take a look at this screenshot, I put this exception event log results.

If, as shown in the figure, I didn't press the F key but an event related to this F key occurred, you can see that this key should be Z.

In this situation, pressing any key triggers the behavior of the F key. If I exit full screen mode and press any key, it will still behave as the F key and enter panoramic mode.

Steps to Reproduce:

1. Press the f key to enter fullscreen mode.
2. Quickly press any other key.
3. Observe that the f key event handler is triggered, even though the f key was not pressed.
4. Press esc to exit Fullscreen
5. Press other key will trigger F event handler, and enter fullscreen

Minimal Reproducible Demo:

https://codesandbox.io/s/zealous-cartwright-wdt5mt?file=/src/App.js

https://wdt5mt.csb.app/

Expected behavior

• No trigger F if the f key is not pressed.

Screenshots

CleanShot.2023-08-18.at.1.47.00.mp4

Desktop (please complete the following information):

• OS: Not care.
• Browser: Chrome, and other Chromium Engine Version 116.0.5845.96

[Innei]

Additionally, even if I press a key that is not the F key, isHotkeyPressed('f') always returns true.

This issue is resolved when the window loses focus and is refocused again. However, the problem will reoccur when entering fullscreen mode again.

[dionjwa]

I have this exact same problem. @Innei did you find any workarounds?

[Innei]

I have this exact same problem. @Innei did you find any workarounds?

Hi, you can judgment the key exact is f or not, like this.

 const trigger = useEventCallback((keyboardEvent?: KeyboardEvent) => {
    // FIXME https://github.com/JohannesKlauss/react-hotkeys-hook/issues/1067
    if (keyboardEvent && keyboardEvent.key !== 'f') return
    if (isInFullscreen) {
      exitFullscreen()

    } else {
      enterFullscreen()

    }
  })
  useHotkeys(['f'], trigger)