From 023df092895614eacf9bc8e85acbd70ea488f98e Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Thu, 19 Sep 2019 11:02:24 +0200
Subject: [PATCH] fix: use GlobalHotKeys to catch keyup events

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>
---
 .../src/templates/Challenges/components/Hotkeys.js  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

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 (
     <HotKeys handlers={handlers} innerRef={innerRef} keyMap={keyMap}>
       {children}
+      <GlobalHotKeys />
     </HotKeys>
   );
 }