[BUG]hotkeys are not working, when entered fullscreen mode
y-takey opened this issue · 0 comments
y-takey commented
Describe the bug
Hotkeys are not working, when entered fullscreen mode using hotkey.
How to reproduce (see below code)
- type f (works fine, and enter fullscreen)
- 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>
);
};