From dff45e2c5dd6aea8235e6e01fbc7d9a9b5fd3fa7 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 26 Apr 2023 01:42:12 +0100
Subject: [PATCH] Fixed broken shortcut hint overlay

Also updated event handler usage to use abort controller while there.
---
 resources/js/components/shortcuts.js | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/shortcuts.js b/resources/js/components/shortcuts.js
index 8e927e34c..1d5bd51d7 100644
--- a/resources/js/components/shortcuts.js
+++ b/resources/js/components/shortcuts.js
@@ -18,6 +18,7 @@ export class Shortcuts extends Component {
         this.hintsShowing = false;
 
         this.hideHints = this.hideHints.bind(this);
+        this.hintAbortController = null;
 
         this.setupListeners();
     }
@@ -33,8 +34,11 @@ export class Shortcuts extends Component {
 
         window.addEventListener('keydown', event => {
             if (event.key === '?') {
-                const action = this.hintsShowing ? this.hideHints : this.showHints;
-                action();
+                if (this.hintsShowing) {
+                    this.hideHints();
+                } else {
+                    this.showHints();
+                }
             }
         });
     }
@@ -111,10 +115,12 @@ export class Shortcuts extends Component {
             displayedIds.add(id);
         }
 
-        window.addEventListener('scroll', this.hideHints);
-        window.addEventListener('focus', this.hideHints);
-        window.addEventListener('blur', this.hideHints);
-        window.addEventListener('click', this.hideHints);
+        this.hintAbortController = new AbortController();
+        const signal = this.hintAbortController.signal;
+        window.addEventListener('scroll', this.hideHints, {signal});
+        window.addEventListener('focus', this.hideHints, {signal});
+        window.addEventListener('blur', this.hideHints, {signal});
+        window.addEventListener('click', this.hideHints, {signal});
 
         this.hintsShowing = true;
     }
@@ -149,12 +155,7 @@ export class Shortcuts extends Component {
     hideHints() {
         const wrapper = this.container.querySelector('.shortcut-container');
         wrapper.remove();
-
-        window.removeEventListener('scroll', this.hideHints);
-        window.removeEventListener('focus', this.hideHints);
-        window.removeEventListener('blur', this.hideHints);
-        window.removeEventListener('click', this.hideHints);
-
+        this.hintAbortController?.abort();
         this.hintsShowing = false;
     }