feat: remove local implementation

This reverts commit 285017647b.

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="phone-input--wrap relative">
+  <div class="relative phone-input--wrap">
     <div class="phone-input" :class="{ 'has-error': error }">
       <div
         class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
@@ -13,7 +13,7 @@
       </div>
       <span
         v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 font-medium text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
+        class="flex py-2 pl-2 pr-0 text-base font-normal font-medium leading-normal bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100"
       >
         {{ activeDialCode }}
       </span>
@@ -49,20 +49,20 @@
         }"
         @click="onSelectCountry(country)"
       >
-        <span class="text-base mr-1">{{ country.emoji }}</span>
+        <span class="mr-1 text-base">{{ country.emoji }}</span>
 
         <span
           class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
         >
           {{ country.name }}
         </span>
-        <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
+        <span class="ml-1 text-xs text-slate-300 dark:text-slate-300">{{
           country.dial_code
         }}</span>
       </div>
       <div v-if="filteredCountriesBySearch.length === 0">
         <span
-          class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
+          class="flex items-center justify-center mt-4 text-sm text-slate-500 dark:text-slate-300"
         >
           No results found
         </span>
@@ -229,6 +229,7 @@ export default {
         ArrowUp: {
           action: e => {
             e.preventDefault();
+            console.log('ArrowUp in PhoneInput');
             this.moveUp();
           },
           allowOnFocusedInput: true,
@@ -236,6 +237,7 @@ export default {
         ArrowDown: {
           action: e => {
             e.preventDefault();
+            console.log('ArrowDown in PhoneInput');
             this.moveDown();
           },
           allowOnFocusedInput: true,
@@ -243,6 +245,7 @@ export default {
         Enter: {
           action: e => {
             e.preventDefault();
+            console.log('Enter in PhoneInput');
             this.onSelectCountry(
               this.filteredCountriesBySearch[this.selectedIndex]
             );

app/javascript/dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js

@@ -24,6 +24,7 @@ export default {
         ArrowUp: {
           action: e => {
             this.moveSelectionUp();
+            console.log('ArrowUp in mentionSelectionKeyboardMixin');
             e.preventDefault();
           },
           allowOnFocusedInput: true,
@@ -38,6 +39,7 @@ export default {
         ArrowDown: {
           action: e => {
             this.moveSelectionDown();
+            console.log('ArrowDown in mentionSelectionKeyboardMixin');
             e.preventDefault();
           },
           allowOnFocusedInput: true,
@@ -52,6 +54,7 @@ export default {
         Enter: {
           action: e => {
             this.onSelect();
+            console.log('Enter in mentionSelectionKeyboardMixin');
             e.preventDefault();
           },
           allowOnFocusedInput: true,

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

@@ -39,12 +39,14 @@ export default {
         ArrowUp: {
           action: e => {
             e.preventDefault();
+            console.log('ArrowUp in Dropdown Menu');
             this.focusPreviousButton(menuButtons);
           },
           allowOnFocusedInput: true,
         },
         ArrowDown: {
           action: e => {
+            console.log('ArrowDown in Dropdown Menu');
             e.preventDefault();
             this.focusNextButton(menuButtons);
           },

app/javascript/shared/mixins/keyboardEventListenerMixins.js

@@ -1,6 +1,8 @@
+/* eslint-disable no-console */
 import { isActiveElementTypeable, isEscape } from '../helpers/KeyboardHelpers';
 
 import { createKeybindingsHandler } from 'tinykeys';
+import * as Sentry from '@sentry/browser';
 
 // this is a store that stores the handler globally, and only gets reset on reload
 const taggedHandlers = [];
@@ -45,22 +47,31 @@ export default {
     },
     keydownWrapper(handler) {
       return e => {
-        const actionToPerform =
+        const isFunction = typeof handler === 'function';
-          typeof handler === 'function' ? handler : handler.action;
+        const actionToPerform = isFunction ? handler : handler.action;
-        const allowOnFocusedInput =
+        const allowOnFocusedInput = isFunction
-          typeof handler === 'function' ? false : handler.allowOnFocusedInput;
+          ? false
+          : handler.allowOnFocusedInput;
 
-        const isTypeable = isActiveElementTypeable(e);
+        try {
+          const isTypeable = isActiveElementTypeable(e);
 
-        if (isTypeable) {
+          if (isTypeable) {
-          if (isEscape(e)) {
+            if (isEscape(e)) e.target.blur();
-            e.target.blur();
+            if (!allowOnFocusedInput) return;
           }
 
-          if (!allowOnFocusedInput) return;
+          actionToPerform(e);
+        } catch (err) {
+          // ignore errors
+          Sentry.captureException(err, {
+            context: {
+              component: this.$options?.name,
+              isFunction: isFunction,
+              allowOnFocusedInput: allowOnFocusedInput,
+            },
+          });
         }
-
-        actionToPerform(e);
       };
     },
   },