From dadd572f9d5fdf47162c8b04c141adfac256dd30 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 22 Aug 2024 16:40:55 +0530
Subject: [PATCH] refactor: `useKeyboardEvents` composable  (#9959)

This PR has the following changes

1. Fix tab styles issue caused by adding an additional wrapper for
getting an element ref on `ChatTypeTabs.vue`
2. Refactor `useKeyboardEvents` composable to not require an element
ref. It will use a local abort controller to abort any listener

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../dashboard/components/ChatList.vue         |  2 +-
 .../components/buttons/ResolveAction.vue      |  8 +--
 .../dashboard/components/layout/Sidebar.vue   |  7 +--
 .../components/widgets/AIAssistanceButton.vue |  6 +--
 .../components/widgets/ChatTypeTabs.vue       | 33 ++++++------
 .../components/widgets/LabelSelector.vue      | 10 +---
 .../widgets/WootWriter/ReplyBottomPanel.vue   | 17 ++----
 .../widgets/WootWriter/ReplyTopPanel.vue      | 11 +---
 .../conversation/ConversationHeader.vue       | 10 +---
 .../widgets/conversation/MessagesView.vue     |  5 +-
 .../widgets/conversation/TagAgents.vue        |  1 -
 .../conversation/components/GalleryView.vue   |  4 +-
 .../widgets/mentions/MentionBox.vue           |  1 -
 .../spec/useKeyboardEvents.spec.js            |  5 +-
 .../spec/useKeyboardNavigableList.spec.js     | 22 +-------
 .../composables/useKeyboardEvents.js          | 53 +++++--------------
 .../composables/useKeyboardNavigableList.js   |  3 +-
 .../modules/notes/components/AddNote.vue      |  4 +-
 .../conversation/labels/LabelBox.vue          |  6 +--
 .../components/ArticleSearch/Header.vue       |  5 +-
 .../portal/components/SearchSuggestions.vue   |  1 -
 .../components/ui/dropdown/DropdownMenu.vue   |  2 +-
 22 files changed, 56 insertions(+), 160 deletions(-)

diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index fa95c5024..476fc7438 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -141,7 +141,7 @@ export default {
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, conversationListRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       uiSettings,
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 7c4c4daaa..0626ced59 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -19,7 +19,6 @@ const store = useStore();
 const getters = useStoreGetters();
 const { t } = useI18n();
 
-const resolveActionsRef = ref(null);
 const arrowDownButtonRef = ref(null);
 const isLoading = ref(false);
 
@@ -131,17 +130,14 @@ const keyboardEvents = {
   },
 };
 
-useKeyboardEvents(keyboardEvents, resolveActionsRef);
+useKeyboardEvents(keyboardEvents);
 
 useEmitter(CMD_REOPEN_CONVERSATION, onCmdOpenConversation);
 useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
 </script>
 
 <template>
-  <div
-    ref="resolveActionsRef"
-    class="relative flex items-center justify-end resolve-actions"
-  >
+  <div class="relative flex items-center justify-end resolve-actions">
     <div class="button-group">
       <woot-button
         v-if="isOpen"
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 9a2f5b028..6b13da7ad 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,5 +1,4 @@
 <script>
-import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { getSidebarItems } from './config/default-sidebar';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
@@ -29,7 +28,6 @@ export default {
     },
   },
   setup(props, { emit }) {
-    const sidebarRef = ref(null);
     const route = useRoute();
     const router = useRouter();
 
@@ -67,11 +65,10 @@ export default {
         action: () => navigateToRoute('agent_list'),
       },
     };
-    useKeyboardEvents(keyboardEvents, sidebarRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       toggleKeyShortcutModal,
-      sidebarRef,
     };
   },
   data() {
@@ -201,7 +198,7 @@ export default {
 </script>
 
 <template>
-  <aside ref="sidebarRef" class="flex h-full">
+  <aside class="flex h-full">
     <PrimarySidebar
       :logo-source="globalConfig.logoThumbnail"
       :installation-name="globalConfig.installationName"
diff --git a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
index cf11f3bc4..360599631 100644
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -23,7 +23,6 @@ export default {
 
     const { isAdmin } = useAdmin();
 
-    const aiAssistanceButtonRef = ref(null);
     const initialMessage = ref('');
 
     const initializeMessage = draftMsg => {
@@ -40,13 +39,12 @@ export default {
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, aiAssistanceButtonRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       uiSettings,
       updateUISettings,
       isAdmin,
-      aiAssistanceButtonRef,
       initialMessage,
       initializeMessage,
       recordAnalytics,
@@ -122,7 +120,7 @@ export default {
 </script>
 
 <template>
-  <div ref="aiAssistanceButtonRef">
+  <div>
     <div v-if="isAIIntegrationEnabled" class="relative">
       <AIAssistanceCTAButton
         v-if="shouldShowAIAssistCTAButton"
diff --git a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
index afcf1e839..d5029a3c8 100644
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import wootConstants from 'dashboard/constants/globals';
 
@@ -16,8 +16,6 @@ const props = defineProps({
 
 const emit = defineEmits(['chatTabChange']);
 
-const chatTypeTabsRef = ref(null);
-
 const activeTabIndex = computed(() => {
   return props.items.findIndex(item => item.key === props.activeTab);
 });
@@ -39,24 +37,23 @@ const keyboardEvents = {
     },
   },
 };
-useKeyboardEvents(keyboardEvents, chatTypeTabsRef);
+
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div ref="chatTypeTabsRef">
-    <woot-tabs
-      :index="activeTabIndex"
-      class="tab--chat-type py-0 px-4 w-full"
-      @change="onTabChange"
-    >
-      <woot-tabs-item
-        v-for="item in items"
-        :key="item.key"
-        :name="item.name"
-        :count="item.count"
-      />
-    </woot-tabs>
-  </div>
+  <woot-tabs
+    :index="activeTabIndex"
+    class="w-full px-4 py-0 tab--chat-type"
+    @change="onTabChange"
+  >
+    <woot-tabs-item
+      v-for="item in items"
+      :key="item.key"
+      :name="item.name"
+      :count="item.count"
+    />
+  </woot-tabs>
 </template>
 
 <style scoped lang="scss">
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index 032401561..8f28575b1 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -18,8 +18,6 @@ const props = defineProps({
 
 const emit = defineEmits(['add', 'remove']);
 
-const labelSelectorWrapRef = ref(null);
-
 const { isAdmin } = useAdmin();
 
 const showSearchDropdownLabel = ref(false);
@@ -57,15 +55,11 @@ const keyboardEvents = {
   },
 };
 
-useKeyboardEvents(keyboardEvents, labelSelectorWrapRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div
-    ref="labelSelectorWrapRef"
-    v-on-clickaway="closeDropdownLabel"
-    class="relative leading-6"
-  >
+  <div v-on-clickaway="closeDropdownLabel" class="relative leading-6">
     <AddLabel @add="toggleLabels" />
     <woot-label
       v-for="label in savedLabels"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index e4ab0b41d..60b2f413a 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -1,5 +1,4 @@
 <script>
-import { ref, watchEffect, computed } from 'vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
@@ -117,15 +116,13 @@ export default {
     const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
       useUISettings();
 
-    const uploadRef = ref(null);
-    // TODO: This is really hacky, we need to replace the file picker component with
-    // a custom one, where the logic and the component markup is isolated.
-    // Once we have the custom component, we can remove the hacky logic below.
-    const uploadRefElem = computed(() => uploadRef.value?.$el);
-
     const keyboardEvents = {
       'Alt+KeyA': {
         action: () => {
+          // TODO: This is really hacky, we need to replace the file picker component with
+          // a custom one, where the logic and the component markup is isolated.
+          // Once we have the custom component, we can remove the hacky logic below.
+
           const uploadTriggerButton = document.querySelector(
             '#conversationAttachment'
           );
@@ -135,14 +132,11 @@ export default {
       },
     };
 
-    watchEffect(() => {
-      useKeyboardEvents(keyboardEvents, uploadRefElem);
-    });
+    useKeyboardEvents(keyboardEvents);
 
     return {
       setSignatureFlagForInbox,
       fetchSignatureFlagFromUISettings,
-      uploadRef,
     };
   },
   computed: {
@@ -267,7 +261,6 @@ export default {
         @click="toggleEmojiPicker"
       />
       <FileUpload
-        ref="uploadRef"
         v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
         input-id="conversationAttachment"
         :size="4096 * 4096"
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 280b3ca42..65de496c0 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -1,5 +1,4 @@
 <script>
-import { ref } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
 export default {
@@ -23,8 +22,6 @@ export default {
     },
   },
   setup(props, { emit }) {
-    const replyTopRef = ref(null);
-
     const setReplyMode = mode => {
       emit('setReplyMode', mode);
     };
@@ -44,12 +41,11 @@ export default {
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, replyTopRef);
+    useKeyboardEvents(keyboardEvents);
 
     return {
       handleReplyClick,
       handleNoteClick,
-      replyTopRef,
     };
   },
   computed: {
@@ -76,10 +72,7 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="replyTopRef"
-    class="flex justify-between bg-black-50 dark:bg-slate-800"
-  >
+  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
     <div class="button-group">
       <woot-button
         variant="clear"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 8bfc1d314..4e2ddd452 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -1,5 +1,4 @@
 <script>
-import { ref } from 'vue';
 import { mapGetters } from 'vuex';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import BackButton from '../BackButton.vue';
@@ -43,18 +42,12 @@ export default {
     },
   },
   setup(props, { emit }) {
-    const conversationHeaderActionsRef = ref(null);
-
     const keyboardEvents = {
       'Alt+KeyO': {
         action: () => emit('contactPanelToggle'),
       },
     };
-    useKeyboardEvents(keyboardEvents, conversationHeaderActionsRef);
-
-    return {
-      conversationHeaderActionsRef,
-    };
+    useKeyboardEvents(keyboardEvents);
   },
   computed: {
     ...mapGetters({
@@ -182,7 +175,6 @@ export default {
           </div>
 
           <div
-            ref="conversationHeaderActionsRef"
             class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
           >
             <InboxName v-if="hasMultipleInboxes" :inbox="inbox" />
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 711ba30f9..c5d1facee 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -52,7 +52,6 @@ export default {
     },
   },
   setup() {
-    const conversationFooterRef = ref(null);
     const isPopOutReplyBox = ref(false);
     const { isEnterprise } = useConfig();
 
@@ -70,7 +69,7 @@ export default {
       },
     };
 
-    useKeyboardEvents(keyboardEvents, conversationFooterRef);
+    useKeyboardEvents(keyboardEvents);
 
     const {
       isAIIntegrationEnabled,
@@ -81,7 +80,6 @@ export default {
 
     return {
       isEnterprise,
-      conversationFooterRef,
       isPopOutReplyBox,
       closePopOutReplyBox,
       showPopOutReplyBox,
@@ -529,7 +527,6 @@ export default {
       />
     </ul>
     <div
-      ref="conversationFooterRef"
       class="conversation-footer"
       :class="{ 'modal-mask': isPopOutReplyBox }"
     >
diff --git a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
index d4c5a0930..e837fcc9c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/TagAgents.vue
@@ -40,7 +40,6 @@ const onSelect = () => {
 };
 
 useKeyboardNavigableList({
-  elementRef: tagAgentsRef,
   items,
   onSelect,
   adjustScroll,
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
index f3610e546..8aa2a1aad 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
@@ -35,7 +35,6 @@ const ALLOWED_FILE_TYPES = {
 const MAX_ZOOM_LEVEL = 2;
 const MIN_ZOOM_LEVEL = 1;
 
-const galleryViewRef = ref(null);
 const zoomScale = ref(1);
 const activeAttachment = ref({});
 const activeFileType = ref('');
@@ -202,7 +201,7 @@ const keyboardEvents = {
     },
   },
 };
-useKeyboardEvents(keyboardEvents, galleryViewRef);
+useKeyboardEvents(keyboardEvents);
 
 onMounted(() => {
   setImageAndVideoSrc(props.attachment);
@@ -218,7 +217,6 @@ onMounted(() => {
     :on-close="onClose"
   >
     <div
-      ref="galleryViewRef"
       v-on-clickaway="onClose"
       class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
       @click="onClose"
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index 1d1a51ff5..fe1357a8d 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -39,7 +39,6 @@ const onSelect = () => {
 };
 
 useKeyboardNavigableList({
-  elementRef: mentionsListContainerRef,
   items: computed(() => props.items),
   onSelect,
   adjustScroll,
diff --git a/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js b/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
index 095c0a43c..d20babeaa 100644
--- a/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
+++ b/app/javascript/dashboard/composables/spec/useKeyboardEvents.spec.js
@@ -1,4 +1,3 @@
-import { unref } from 'vue';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 
 describe('useKeyboardEvents', () => {
@@ -11,15 +10,13 @@ describe('useKeyboardEvents', () => {
   });
 
   it('should set up listeners on mount and remove them on unmount', async () => {
-    const el = document.createElement('div');
-    const elRef = unref({ value: el });
     const events = {
       'ALT+KeyL': () => {},
     };
 
     const mountedMock = vi.fn();
     const unmountedMock = vi.fn();
-    useKeyboardEvents(events, elRef);
+    useKeyboardEvents(events);
     mountedMock();
     unmountedMock();
 
diff --git a/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js b/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
index 4968bdafe..310040912 100644
--- a/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
+++ b/app/javascript/dashboard/composables/spec/useKeyboardNavigableList.spec.js
@@ -9,7 +9,6 @@ vi.mock('../useKeyboardEvents', () => ({
 }));
 
 describe('useKeyboardNavigableList', () => {
-  let elementRef;
   let items;
   let onSelect;
   let adjustScroll;
@@ -18,7 +17,6 @@ describe('useKeyboardNavigableList', () => {
   const createMockEvent = () => ({ preventDefault: vi.fn() });
 
   beforeEach(() => {
-    elementRef = ref(null);
     items = ref(['item1', 'item2', 'item3']);
     onSelect = vi.fn();
     adjustScroll = vi.fn();
@@ -28,7 +26,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should return moveSelectionUp and moveSelectionDown functions', () => {
     const result = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -43,7 +40,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should move selection up correctly', () => {
     const { moveSelectionUp } = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -65,7 +61,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should move selection down correctly', () => {
     const { moveSelectionDown } = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -87,7 +82,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should call adjustScroll after moving selection', () => {
     const { moveSelectionUp, moveSelectionDown } = useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -103,7 +97,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should include Enter key handler when onSelect is provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -118,7 +111,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should not include Enter key handler when onSelect is not provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       adjustScroll,
       selectedIndex,
@@ -131,7 +123,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should not trigger onSelect when items are empty', () => {
     const { moveSelectionUp, moveSelectionDown } = useKeyboardNavigableList({
-      elementRef,
       items: ref([]),
       onSelect,
       adjustScroll,
@@ -145,23 +136,18 @@ describe('useKeyboardNavigableList', () => {
 
   it('should call useKeyboardEvents with correct parameters', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
       selectedIndex,
     });
 
-    expect(useKeyboardEvents).toHaveBeenCalledWith(
-      expect.any(Object),
-      elementRef
-    );
+    expect(useKeyboardEvents).toHaveBeenCalledWith(expect.any(Object));
   });
 
   // Keyboard event handlers
   it('should handle ArrowUp key', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -178,7 +164,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle Control+KeyP', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -195,7 +180,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle ArrowDown key', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -212,7 +196,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle Control+KeyN', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -229,7 +212,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should handle Enter key when onSelect is provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
@@ -245,7 +227,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should not have Enter key handler when onSelect is not provided', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       adjustScroll,
       selectedIndex,
@@ -257,7 +238,6 @@ describe('useKeyboardNavigableList', () => {
 
   it('should set allowOnFocusedInput to true for all key handlers', () => {
     useKeyboardNavigableList({
-      elementRef,
       items,
       onSelect,
       adjustScroll,
diff --git a/app/javascript/dashboard/composables/useKeyboardEvents.js b/app/javascript/dashboard/composables/useKeyboardEvents.js
index 388b1b8b4..8abee2577 100644
--- a/app/javascript/dashboard/composables/useKeyboardEvents.js
+++ b/app/javascript/dashboard/composables/useKeyboardEvents.js
@@ -1,4 +1,3 @@
-import { onMounted, onBeforeUnmount, unref } from 'vue';
 import {
   isActiveElementTypeable,
   isEscape,
@@ -7,8 +6,7 @@ import {
 } from 'shared/helpers/KeyboardHelpers';
 import { useDetectKeyboardLayout } from 'dashboard/composables/useDetectKeyboardLayout';
 import { createKeybindingsHandler } from 'tinykeys';
-
-const keyboardListenerMap = new WeakMap();
+import { onUnmounted, onMounted } from 'vue';
 
 /**
  * Determines if the keyboard event should be ignored based on the element type and handler settings.
@@ -69,49 +67,24 @@ async function wrapEventsInKeybindingsHandler(events) {
   return wrappedEvents;
 }
 
-/**
- * Sets up keyboard event listeners on the specified element.
- * @param {Element} root - The DOM element to attach listeners to.
- * @param {Object} events - The events to listen for.
- */
-const setupListeners = (root, events) => {
-  if (root instanceof Element && events) {
-    const keydownHandler = createKeybindingsHandler(events);
-    document.addEventListener('keydown', keydownHandler);
-    keyboardListenerMap.set(root, keydownHandler);
-  }
-};
-
-/**
- * Removes keyboard event listeners from the specified element.
- * @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);
-    keyboardListenerMap.delete(root);
-  }
-};
-
 /**
  * Vue composable to handle keyboard events with support for different keyboard layouts.
  * @param {Object} keyboardEvents - The keyboard events to handle.
- * @param {ref} elRef - A Vue ref to the element to attach the keyboard events to.
  */
-export function useKeyboardEvents(keyboardEvents, elRef = null) {
+export async function useKeyboardEvents(keyboardEvents) {
+  let abortController = new AbortController();
+
   onMounted(async () => {
-    const el = unref(elRef);
-    const getKeyboardEvents = () => keyboardEvents || null;
-    const events = getKeyboardEvents();
-    const wrappedEvents = await wrapEventsInKeybindingsHandler(events);
-    setupListeners(el, wrappedEvents);
+    if (!keyboardEvents) return;
+    const wrappedEvents = await wrapEventsInKeybindingsHandler(keyboardEvents);
+    const keydownHandler = createKeybindingsHandler(wrappedEvents);
+
+    document.addEventListener('keydown', keydownHandler, {
+      signal: abortController.signal,
+    });
   });
 
-  onBeforeUnmount(() => {
-    const el = unref(elRef);
-    removeListeners(el);
+  onUnmounted(() => {
+    abortController.abort();
   });
 }
diff --git a/app/javascript/dashboard/composables/useKeyboardNavigableList.js b/app/javascript/dashboard/composables/useKeyboardNavigableList.js
index c05d91fb6..9bf3eb8ff 100644
--- a/app/javascript/dashboard/composables/useKeyboardNavigableList.js
+++ b/app/javascript/dashboard/composables/useKeyboardNavigableList.js
@@ -84,7 +84,6 @@ const updateSelectionIndex = (currentIndex, itemsLength, direction) => {
  * }} An object containing functions to move the selection up and down.
  */
 export function useKeyboardNavigableList({
-  elementRef,
   items,
   onSelect,
   adjustScroll,
@@ -109,7 +108,7 @@ export function useKeyboardNavigableList({
     items
   );
 
-  useKeyboardEvents(keyboardEvents, elementRef);
+  useKeyboardEvents(keyboardEvents);
 
   return {
     moveSelectionUp,
diff --git a/app/javascript/dashboard/modules/notes/components/AddNote.vue b/app/javascript/dashboard/modules/notes/components/AddNote.vue
index f3f82e8a3..55c825695 100644
--- a/app/javascript/dashboard/modules/notes/components/AddNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/AddNote.vue
@@ -5,7 +5,6 @@ import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vu
 
 const emit = defineEmits(['add']);
 
-const addNoteRef = ref(null);
 const noteContent = ref('');
 
 const buttonDisabled = computed(() => noteContent.value === '');
@@ -23,12 +22,11 @@ const keyboardEvents = {
     allowOnFocusedInput: true,
   },
 };
-useKeyboardEvents(keyboardEvents, addNoteRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
   <div
-    ref="addNoteRef"
     class="flex flex-col flex-grow p-4 mb-2 overflow-hidden bg-white border border-solid rounded-md shadow-sm border-slate-75 dark:border-slate-700 dark:bg-slate-900 text-slate-700 dark:text-slate-100"
   >
     <WootMessageEditor
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 942ba115c..a5b2a7468 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -25,7 +25,6 @@ export default {
       removeLabelFromConversation,
     } = useConversationLabels();
 
-    const conversationLabelBoxRef = ref(null);
     const showSearchDropdownLabel = ref(false);
 
     const toggleLabels = () => {
@@ -52,7 +51,7 @@ export default {
         allowOnFocusedInput: true,
       },
     };
-    useKeyboardEvents(keyboardEvents, conversationLabelBoxRef);
+    useKeyboardEvents(keyboardEvents);
     return {
       isAdmin,
       savedLabels,
@@ -60,7 +59,6 @@ export default {
       accountLabels,
       addLabelToConversation,
       removeLabelFromConversation,
-      conversationLabelBoxRef,
       showSearchDropdownLabel,
       closeDropdownLabel,
       toggleLabels,
@@ -81,7 +79,7 @@ export default {
 </script>
 
 <template>
-  <div ref="conversationLabelBoxRef" class="sidebar-labels-wrap">
+  <div class="sidebar-labels-wrap">
     <div
       v-if="!conversationUiFlags.isFetching"
       class="contact-conversation--list"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index da139ddb5..e237a4a48 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -11,7 +11,6 @@ defineProps({
 
 const emit = defineEmits(['search', 'close']);
 
-const articleSearchHeaderRef = ref(null);
 const searchInputRef = ref(null);
 const searchQuery = ref('');
 
@@ -41,11 +40,11 @@ const keyboardEvents = {
     allowOnFocusedInput: true,
   },
 };
-useKeyboardEvents(keyboardEvents, articleSearchHeaderRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div ref="articleSearchHeaderRef" class="flex flex-col py-1">
+  <div class="flex flex-col py-1">
     <div class="flex items-center justify-between py-2 mb-1">
       <h3 class="text-base text-slate-900 dark:text-slate-25">
         {{ title }}
diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue
index 68abe44f5..5838e8c7c 100644
--- a/app/javascript/portal/components/SearchSuggestions.vue
+++ b/app/javascript/portal/components/SearchSuggestions.vue
@@ -44,7 +44,6 @@ export default {
     };
 
     useKeyboardNavigableList({
-      elementRef: portalSearchSuggestionsRef,
       items: computed(() => props.items),
       adjustScroll,
       selectedIndex,
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
index d7f81cf5c..1b2ef7550 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownMenu.vue
@@ -52,7 +52,7 @@ const keyboardEvents = {
   },
 };
 
-useKeyboardEvents(keyboardEvents, dropdownMenuRef);
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>