gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: use GlobalHotKeys to catch keyup events

Browse Source 
Added GlobalHotKeys just to make sure all keyup events are registered,
regardless of what state HotKeys is in.

Co-authored-by: moT01 <tmondloch01@gmail.com>
This commit is contained in:
Oliver Eyton-Williams
2019-09-19 11:02:24 +02:00
committed by mrugesh
parent af1008f4e5
commit 023df09289
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/templates/Challenges/components/Hotkeys.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { HotKeys } from 'react-hotkeys';
import { HotKeys, GlobalHotKeys } from 'react-hotkeys';
import { navigate } from 'gatsby';
const keyMap = {
@ -27,15 +27,24 @@ function Hotkeys({
prevChallengePath
}) {
const handlers = {
EXECUTE_CHALLENGE: () => {
EXECUTE_CHALLENGE: e => {
// the 'enter' part of 'ctrl+enter' stops HotKeys from listening, so it
// needs to be prevented.
// TODO: 'enter' on its own also disables HotKeys, but default behaviour
// should not be prevented in that case.
e.preventDefault();
if (executeChallenge) executeChallenge();
},
NAVIGATE_PREV: () => navigate(prevChallengePath),
NAVIGATE_NEXT: () => navigate(introPath ? introPath : nextChallengePath)
};
// GlobalHotKeys is always mounted and tracks all keypresses. Without it,
// keyup events can be missed and react-hotkeys assumes that that key is still
// being pressed.
return (
<HotKeys handlers={handlers} innerRef={innerRef} keyMap={keyMap}>
{children}
<GlobalHotKeys />
</HotKeys>
);
}