feat: Adds keyboard shortcuts for conversation actions (#2672)

* feat: Adds keyboard shortcuts for conversation actions

* Minor fixes

* Minor fixes

* Minor fixes and add new shortcut

* MInor fixes

* Review fixes

* Minor fixes

* Code cleanup

* Minor fixes

* Uses Alt or Option key instead of shift-key

* Review fixes

* Review fixes

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -11,12 +11,7 @@
       />
     </div>
     <div class="list-scroll-container">
-      <div
-        ref="multiselectDropdown"
-        class="multiselect-dropdown--list"
-        @keyup.up="onArrowUp"
-        @keyup.down="onArrowDown"
-      >
+      <div class="multiselect-dropdown--list">
         <woot-dropdown-menu>
           <woot-dropdown-item
             v-for="option in filteredOptions"
@@ -119,38 +114,6 @@ export default {
     focusInput() {
       this.$refs.searchbar.focus();
     },
-    onArrowUp() {
-      const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
-        '.dropdown .multiselect-dropdown--item'
-      );
-      const focusedElement = this.$refs.multiselectDropdown.querySelector(
-        '.dropdown .multiselect-dropdown--item:focus'
-      );
-      const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
-      const lastElementIndex = allDropdownItems.length - 1;
-
-      if (activeElementIndex >= 1) {
-        allDropdownItems[activeElementIndex - 1].focus();
-      } else {
-        allDropdownItems[lastElementIndex].focus();
-      }
-    },
-    onArrowDown() {
-      const allDropdownItems = this.$refs.multiselectDropdown.querySelectorAll(
-        '.dropdown .multiselect-dropdown--item'
-      );
-      const focusedElement = this.$refs.multiselectDropdown.querySelector(
-        '.dropdown .multiselect-dropdown--item:focus'
-      );
-      const activeElementIndex = [...allDropdownItems].indexOf(focusedElement);
-      const lastElementIndex = allDropdownItems.length - 1;
-
-      if (activeElementIndex === lastElementIndex) {
-        allDropdownItems[0].focus();
-      } else {
-        allDropdownItems[activeElementIndex + 1].focus();
-      }
-    },
   },
 };
 </script>

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

@@ -42,6 +42,10 @@ export default {
       &:hover {
         background: var(--color-background);
       }
+
+      &:focus {
+        background: var(--color-background);
+      }
     }
   }
 }

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

@@ -1,5 +1,6 @@
 <template>
   <ul
+    ref="dropdownMenu"
     class="dropdown menu vertical"
     :class="[placement && `dropdown--${placement}`]"
   >
@@ -7,15 +8,67 @@
   </ul>
 </template>
 <script>
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import {
+  hasPressedArrowUpKey,
+  hasPressedArrowDownKey,
+} from 'shared/helpers/KeyboardHelpers';
 export default {
   name: 'WootDropdownMenu',
   componentName: 'WootDropdownMenu',
 
+  mixins: [eventListenerMixins],
+
   props: {
     placement: {
       type: String,
       default: 'top',
     },
   },
+
+  mounted() {
+    this.focusItem();
+  },
+  methods: {
+    focusItem() {
+      this.$refs.dropdownMenu
+        .querySelector('ul.dropdown li.dropdown-menu__item .button')
+        .focus();
+    },
+    handleKeyEvents(e) {
+      if (hasPressedArrowUpKey(e)) {
+        const items = this.$refs.dropdownMenu.querySelectorAll(
+          'ul.dropdown li.dropdown-menu__item .button'
+        );
+        const focusItems = this.$refs.dropdownMenu.querySelector(
+          'ul.dropdown li.dropdown-menu__item .button:focus'
+        );
+        const activeElementIndex = [...items].indexOf(focusItems);
+        const lastElementIndex = items.length - 1;
+
+        if (activeElementIndex >= 1) {
+          items[activeElementIndex - 1].focus();
+        } else {
+          items[lastElementIndex].focus();
+        }
+      }
+      if (hasPressedArrowDownKey(e)) {
+        const items = this.$refs.dropdownMenu.querySelectorAll(
+          'li.dropdown-menu__item .button'
+        );
+        const focusItems = this.$refs.dropdownMenu.querySelector(
+          'li.dropdown-menu__item .button:focus'
+        );
+        const activeElementIndex = [...items].indexOf(focusItems);
+        const lastElementIndex = items.length - 1;
+
+        if (activeElementIndex === lastElementIndex) {
+          items[0].focus();
+        } else {
+          items[activeElementIndex + 1].focus();
+        }
+      }
+    },
+  },
 };
 </script>