feat: Replace the use of keyboardEventListener mixin to a composable (Part -3) (#9897)

app/javascript/shared/components/ui/dropdown/DropdownMenu.vue

@@ -1,59 +1,63 @@
-<script>
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-export default {
-  name: 'WootDropdownMenu',
-  componentName: 'WootDropdownMenu',
+<script setup>
+import { ref } from 'vue';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 
-  mixins: [keyboardEventListenerMixins],
-
-  props: {
-    placement: {
-      type: String,
-      default: 'top',
-    },
+defineProps({
+  placement: {
+    type: String,
+    default: 'top',
   },
-  methods: {
-    dropdownMenuButtons() {
-      return this.$refs.dropdownMenu.querySelectorAll(
-        'ul.dropdown li.dropdown-menu__item .button'
-      );
-    },
-    getActiveButtonIndex(menuButtons) {
-      const focusedButton = this.$refs.dropdownMenu.querySelector(
-        'ul.dropdown li.dropdown-menu__item .button:focus'
-      );
-      return Array.from(menuButtons).indexOf(focusedButton);
-    },
-    getKeyboardEvents() {
-      const menuButtons = this.dropdownMenuButtons();
-      return {
-        ArrowUp: () => this.focusPreviousButton(menuButtons),
-        ArrowDown: () => this.focusNextButton(menuButtons),
-      };
-    },
-    focusPreviousButton(menuButtons) {
-      const activeIndex = this.getActiveButtonIndex(menuButtons);
-      const newIndex =
-        activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
-      this.focusButton(menuButtons, newIndex);
-    },
-    focusNextButton(menuButtons) {
-      const activeIndex = this.getActiveButtonIndex(menuButtons);
-      const newIndex =
-        activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
-      this.focusButton(menuButtons, newIndex);
-    },
-    focusButton(menuButtons, newIndex) {
-      if (menuButtons.length === 0) return;
-      menuButtons[newIndex].focus();
-    },
+});
+
+const dropdownMenuRef = ref(null);
+
+const dropdownMenuButtons = () => {
+  return dropdownMenuRef.value.querySelectorAll(
+    'ul.dropdown li.dropdown-menu__item .button'
+  );
+};
+
+const getActiveButtonIndex = menuButtons => {
+  const focusedButton = dropdownMenuRef.value.querySelector(
+    'ul.dropdown li.dropdown-menu__item .button:focus'
+  );
+  return Array.from(menuButtons).indexOf(focusedButton);
+};
+
+const focusButton = (menuButtons, newIndex) => {
+  if (menuButtons.length === 0) return;
+  menuButtons[newIndex].focus();
+};
+
+const focusPreviousButton = menuButtons => {
+  const activeIndex = getActiveButtonIndex(menuButtons);
+  const newIndex = activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
+  focusButton(menuButtons, newIndex);
+};
+
+const focusNextButton = menuButtons => {
+  const activeIndex = getActiveButtonIndex(menuButtons);
+  const newIndex = activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
+  focusButton(menuButtons, newIndex);
+};
+
+const keyboardEvents = {
+  ArrowUp: {
+    action: () => focusPreviousButton(dropdownMenuButtons()),
+    allowOnFocusedInput: true,
+  },
+  ArrowDown: {
+    action: () => focusNextButton(dropdownMenuButtons()),
+    allowOnFocusedInput: true,
   },
 };
+
+useKeyboardEvents(keyboardEvents, dropdownMenuRef);
 </script>
 
 <template>
   <ul
-    ref="dropdownMenu"
+    ref="dropdownMenuRef"
     class="dropdown menu vertical"
     :class="[placement && `dropdown--${placement}`]"
   >