Merge branch 'add-escape-hatch'

2 files changed, 32 insertions, 2 deletions

diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
new file mode 100644
index 0000000000..3aefd7c684
--- /dev/null
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -0,0 +1,27 @@
+import React, { useCallback, useEffect } from 'react';
+import { useHistory } from 'react-router';
+import History from '../lib/history';
+
+interface IKeyboardNavigationProps {
+  children: React.ReactElement;
+}
+
+export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
+  const history = useHistory() as History;
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        history.reset();
+      }
+    },
+    [history.reset],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  return props.children;
+}
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 4c449e8cf2..858c0be066 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -152,7 +152,9 @@ class ModalAlertWithContext extends React.Component<IModalAlertProps & IModalCon
 
   public componentDidMount() {
     this.props.setActiveModal(true);
-    document.addEventListener('keydown', this.handleKeyPress);
+    // The `true` argument specifies that the event should be dispatched in the capture phase. This
+    // makes sure that this component catches the event before the escape hatch.
+    document.addEventListener('keydown', this.handleKeyPress, true);
 
     const modalContainer = this.props.modalContainerRef.current;
     if (modalContainer) {
@@ -170,7 +172,7 @@ class ModalAlertWithContext extends React.Component<IModalAlertProps & IModalCon
 
   public componentWillUnmount() {
     this.props.setActiveModal(false);
-    document.removeEventListener('keydown', this.handleKeyPress);
+    document.removeEventListener('keydown', this.handleKeyPress, true);
 
     this.appendScheduler.cancel();
     this.props.modalContainerRef.current?.removeChild(this.element);
@@ -219,6 +221,7 @@ class ModalAlertWithContext extends React.Component<IModalAlertProps & IModalCon
 
   private handleKeyPress = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
+      event.stopPropagation();
       this.props.close?.();
     }
   };