feat: remove prevent default

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>
@@ -227,22 +227,15 @@ export default {
     getKeyboardEvents() {
       return {
         ArrowUp: {
-          action: e => {
-            e.preventDefault();
-            this.moveUp();
-          },
+          action: this.moveUp,
           allowOnFocusedInput: true,
         },
         ArrowDown: {
-          action: e => {
-            e.preventDefault();
-            this.moveDown();
-          },
+          action: this.moveDown,
           allowOnFocusedInput: true,
         },
         Enter: {
-          action: e => {
-            e.preventDefault();
+          action: () => {
             this.onSelectCountry(
               this.filteredCountriesBySearch[this.selectedIndex]
             );

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

@@ -22,10 +22,7 @@ export default {
     getKeyboardEvents() {
       return {
         ArrowUp: {
-          action: e => {
-            this.moveSelectionUp();
-            e.preventDefault();
-          },
+          action: this.moveSelectionUp,
           allowOnFocusedInput: true,
         },
         'Control+KeyP': {
@@ -36,10 +33,7 @@ export default {
           allowOnFocusedInput: true,
         },
         ArrowDown: {
-          action: e => {
-            this.moveSelectionDown();
-            e.preventDefault();
-          },
+          action: this.moveSelectionDown,
           allowOnFocusedInput: true,
         },
         'Control+KeyN': {

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

@@ -37,17 +37,11 @@ export default {
       const menuButtons = this.dropdownMenuButtons();
       return {
         ArrowUp: {
-          action: e => {
-            e.preventDefault();
-            this.focusPreviousButton(menuButtons);
-          },
+          action: () => this.focusPreviousButton(menuButtons),
           allowOnFocusedInput: true,
         },
         ArrowDown: {
-          action: e => {
-            e.preventDefault();
-            this.focusNextButton(menuButtons);
-          },
+          action: () => this.focusNextButton(menuButtons),
           allowOnFocusedInput: true,
         },
       };