From 150f7a7835491bae5c2157cf59622e42263cd9f2 Mon Sep 17 00:00:00 2001
From: Gorjan Petrovski <mogi57@gmail.com>
Date: Mon, 27 Sep 2021 11:55:52 +0200
Subject: [PATCH] feat(preferences): close preferences with Esc button (#647)

* feat(preferences): close preferences with Esc button

* feat: use ioService for escape key handling
---
 .../javascripts/preferences/PreferencesView.tsx    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/assets/javascripts/preferences/PreferencesView.tsx b/app/assets/javascripts/preferences/PreferencesView.tsx
index 402a6fb84..fc5c328a2 100644
--- a/app/assets/javascripts/preferences/PreferencesView.tsx
+++ b/app/assets/javascripts/preferences/PreferencesView.tsx
@@ -8,6 +8,7 @@ import { PreferencesMenuView } from './PreferencesMenuView';
 import { WebApplication } from '@/ui_models/application';
 import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
+import { useCallback, useEffect } from 'preact/hooks';
 
 interface PreferencesProps extends MfaProps {
   application: WebApplication;
@@ -63,6 +64,19 @@ const PreferencesCanvas: FunctionComponent<
 
 export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
   (props) => {
+
+    useEffect(() => {
+      const removeEscKeyObserver = props.application.io.addKeyObserver({
+        key: 'Escape',
+        onKeyDown: (event) => {
+          event.preventDefault();
+          props.closePreferences();
+        }
+      });
+      return () => {
+        removeEscKeyObserver();
+      };
+    }, [props]);
     const menu = new PreferencesMenu();
     return (
       <div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">