greena13/react-hotkeys

[BUG]hotkeys are not working, when entered fullscreen mode

y-takey opened this issue · 0 comments

Describe the bug

Hotkeys are not working, when entered fullscreen mode using hotkey.

How to reproduce (see below code)

  1. type f (works fine, and enter fullscreen)
  2. type l (not works, don't display a console log)

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc)

import React from "react";
import { GlobalHotKeys, configure } from "react-hotkeys";
import "./App.css";

const App: React.FC = () => {
  const ref = React.useRef<HTMLDivElement>(null);
  const log = () => console.log("key event");
  const fullscreen = () => {
    if (ref.current) ref.current.requestFullscreen();
  };
  const keyMap = { fullscreen: "f", log: "l" };
  const handlers = { fullscreen, log };

  return (
    <div className="App" ref={ref}>
      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
      <header>
        <p>App</p>
      </header>
    </div>
  );
};

Expected behavior
I expect to call log function.

Platform (please complete the following information):

  • Version of react-hotkeys: 2.0.0
  • Browser: Chrome 79.0.3945.117
  • OS: macOS 10.15.2

Are you willing and able to create a PR request to fix this issue?

no

Include the smallest log that includes your issue:

HotKeys (GLOBAL-E12❤️): New 'f' keydown event (that has NOT passed through React app).
HotKeys (GLOBAL-E12❤️-C0🔺): Found action that matches 'f': fullscreen. Calling handler . . .
HotKeys (GLOBAL-E12❤️-C0🔺): Stopping further event propagation.
HotKeys (GLOBAL-E12❤️): Searching no further, as handler has been found (and called).
HotKeys (GLOBAL-E13💚): New 'f' keypress event (that has NOT passed through React app).
HotKeys (GLOBAL-E13💚): Ignored 'f' keypress because it doesn't have any keypress handlers.
HotKeys (GLOBAL-E14💙): New 'l' keydown event (that has NOT passed through React app).
# ↓ combined `f` and `l` keys
HotKeys (GLOBAL-E14💙-C0🔺): No matching actions found for 'f+l' keydown.
HotKeys (GLOBAL-E15💛): New 'l' keypress event (that has NOT passed through React app).
HotKeys (GLOBAL-E15💛): Ignored 'f+l' keypress because it doesn't have any keypress handlers.
HotKeys (GLOBAL-E16💜): New 'l' keyup event (that has NOT passed through React app).
HotKeys (GLOBAL-E16💜): Ignored 'f+l' keyup because it doesn't have any keyup handlers.

What Configuration options are you using?

Default

Work Around

I can avoid the issue to delay to request fullscreen.

const App: React.FC = () => {
  const ref = React.useRef<HTMLDivElement>(null);
  const log = () => console.log("key event");
  const fullscreen = () => {
    window.setTimeout(() => { # changed here
      if (ref.current) ref.current.requestFullscreen();
    }, 500);
  };
  const keyMap = { fullscreen: "f", log: "l" };
  const handlers = { fullscreen, log };

  return (
    <div className="App" ref={ref}>
      <GlobalHotKeys keyMap={keyMap} handlers={handlers} />
      <header>
        <p>App</p>
      </header>
    </div>
  );
};