fix: Keydown handler in useKeyboardEvent composable not registering correctly (#9896)

… 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

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