diff --git a/client/src/templates/Challenges/components/Hotkeys.js b/client/src/templates/Challenges/components/Hotkeys.js index 25d45e077c..8196fb152d 100644 --- a/client/src/templates/Challenges/components/Hotkeys.js +++ b/client/src/templates/Challenges/components/Hotkeys.js @@ -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 ( {children} + ); }