refactor: handling keyboard shortcuts (#9242)

* fix: Resolve and go next keyboard shortcuts doesn't work

* refactor: use buildHotKeys instead of  hasPressedCommandPlusAltAndEKey

* feat: install tinykeys

* refactor: use tinykeys

* test: update buildKeyEvents

* fix: remove stray import

* feat: handle action list globally

* feat: allow configuring `allowOnFocusedInput`

* chore: Navigate chat list item

* chore: Navigate dashboard

* feat: Navigate editor top panel

* feat: Toggle file upload

* chore: More keyboard shortcuts

* chore: Update mention selection mixin

* chore: Phone input

* chore: Clean up

* chore: Clean up

* chore: Dropdown and editor

* chore: Enter key to send and clean up

* chore: Rename mixin

* chore: Review fixes

* chore: Removed unused shortcut from modal

* fix: Specs

---------

Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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

@@ -8,16 +8,12 @@
   </ul>
 </template>
 <script>
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import {
-  hasPressedArrowUpKey,
-  hasPressedArrowDownKey,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
   name: 'WootDropdownMenu',
   componentName: 'WootDropdownMenu',
 
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
 
   props: {
     placement: {
@@ -31,38 +27,46 @@ export default {
         'ul.dropdown li.dropdown-menu__item .button'
       );
     },
-    activeElementIndex() {
-      const menuButtons = this.dropdownMenuButtons();
+    getActiveButtonIndex(menuButtons) {
       const focusedButton = this.$refs.dropdownMenu.querySelector(
         'ul.dropdown li.dropdown-menu__item .button:focus'
       );
-      const activeIndex = [...menuButtons].indexOf(focusedButton);
-      return activeIndex;
+      return Array.from(menuButtons).indexOf(focusedButton);
     },
-    handleKeyEvents(e) {
+    getKeyboardEvents() {
       const menuButtons = this.dropdownMenuButtons();
-      const lastElementIndex = menuButtons.length - 1;
-
+      return {
+        ArrowUp: {
+          action: e => {
+            e.preventDefault();
+            this.focusPreviousButton(menuButtons);
+          },
+          allowOnFocusedInput: true,
+        },
+        ArrowDown: {
+          action: e => {
+            e.preventDefault();
+            this.focusNextButton(menuButtons);
+          },
+          allowOnFocusedInput: true,
+        },
+      };
+    },
+    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;
-
-      if (hasPressedArrowUpKey(e)) {
-        const activeIndex = this.activeElementIndex();
-
-        if (activeIndex >= 1) {
-          menuButtons[activeIndex - 1].focus();
-        } else {
-          menuButtons[lastElementIndex].focus();
-        }
-      }
-      if (hasPressedArrowDownKey(e)) {
-        const activeIndex = this.activeElementIndex();
-
-        if (activeIndex === lastElementIndex) {
-          menuButtons[0].focus();
-        } else {
-          menuButtons[activeIndex + 1].focus();
-        }
-      }
+      menuButtons[newIndex].focus();
     },
   },
 };