From 59b9c5596736955f7ccb96c473ab542b5675f95e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 6 Aug 2024 19:34:36 +0530
Subject: [PATCH] fix: Keydown handler in `useKeyboardEvent` composable not
 registering correctly (#9896)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

… correctly

# Pull Request Template

## Description

This PR fixes an issue where the key down handler in the
`useKeyboardEvent` composable was not registering correctly.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/composables/useKeyboardEvents.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/composables/useKeyboardEvents.js b/app/javascript/dashboard/composables/useKeyboardEvents.js
index b0e420989..388b1b8b4 100644
--- a/app/javascript/dashboard/composables/useKeyboardEvents.js
+++ b/app/javascript/dashboard/composables/useKeyboardEvents.js
@@ -77,8 +77,8 @@ async function wrapEventsInKeybindingsHandler(events) {
 const setupListeners = (root, events) => {
   if (root instanceof Element && events) {
     const keydownHandler = createKeybindingsHandler(events);
-    const handler = window.addEventListener('keydown', keydownHandler);
-    keyboardListenerMap.set(root, handler);
+    document.addEventListener('keydown', keydownHandler);
+    keyboardListenerMap.set(root, keydownHandler);
   }
 };
 
@@ -87,6 +87,8 @@ const setupListeners = (root, events) => {
  * @param {Element} root - The DOM element to remove listeners from.
  */
 const removeListeners = root => {
+  // In the future, let's use the abort controller to remove the listeners
+  // https://caniuse.com/abortcontroller
   if (root instanceof Element) {
     const handlerToRemove = keyboardListenerMap.get(root);
     document.removeEventListener('keydown', handlerToRemove);