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>

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>
   );
 }