From 565747357321bf6b1a9156f4ace458b0071d602d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 16 May 2024 09:16:02 +0530
Subject: [PATCH] fix: Dashboard phone number input country `undefined` in
 `onSelectCountry` (#9473)

# Pull Request Template

## Description

This PR will fix this sentry
[issue](https://chatwoot-p3.sentry.io/issues/5291039795/)

**Issue**
The root cause of this issue is the usage of
`keyboardEventListenerMixins`. The key events are always active when the
edit conversation modal is active, even if the country dropdown is not
visible. So, if we press the enter key, this error will be thrown into
the console.

**Solution**
Remove the use of `keyboardEventListenerMixins` and handle it directly
in the Vue native key events. Also, always check if the dropdown is
active.

**Other changes**
1. Remove the `mouseup` event lister and use the click away directive.
2. Use inline Tailwind css


Fixes
https://linear.app/chatwoot/issue/CW-3282/phonenumberinput-country-undefined-in-onselectcountry

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Steps**
1. Open a conversation.
3. And click the edit contact button
4. And click the enter key
5. Now you can see the error in the console


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../components/widgets/forms/PhoneInput.vue   | 176 ++++++------------
 1 file changed, 62 insertions(+), 114 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index 9b77faafe..6b09acbac 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -1,9 +1,16 @@
 <template>
   <div class="phone-input--wrap relative">
-    <div class="phone-input" :class="{ 'has-error': error }">
+    <div
+      class="flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid"
+      :class="
+        error
+          ? 'border border-solid border-red-400 dark:border-red-400 mb-1'
+          : 'mb-4 border-slate-200 dark:border-slate-600'
+      "
+    >
       <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"
-        @click="toggleCountryDropdown"
+        @click.prevent="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry" class="mb-0">
           {{ activeCountry.emoji }}
@@ -13,14 +20,15 @@
       </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 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
       >
         {{ activeDialCode }}
       </span>
       <input
+        ref="phoneNumberInput"
         :value="phoneNumber"
         type="tel"
-        class="phone-input--field"
+        class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
         :placeholder="placeholder"
         :readonly="readonly"
         :style="styles"
@@ -28,24 +36,36 @@
         @blur="onBlur"
       />
     </div>
-    <div v-if="showDropdown" ref="dropdown" class="country-dropdown">
-      <div class="dropdown-search--wrap">
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      v-on-clickaway="onOutsideClick"
+      tabindex="0"
+      class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
+      @keydown.prevent.up="moveUp"
+      @keydown.prevent.down="moveDown"
+      @keydown.prevent.enter="
+        onSelectCountry(filteredCountriesBySearch[selectedIndex])
+      "
+    >
+      <div class="top-0 sticky bg-white dark:bg-slate-900 p-1">
         <input
           ref="searchbar"
           v-model="searchCountry"
           type="text"
           placeholder="Search"
-          class="dropdown-search"
+          class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-200 dark:!border-slate-600"
+          @input="onSearchCountry"
         />
       </div>
       <div
         v-for="(country, index) in filteredCountriesBySearch"
         ref="dropdownItem"
         :key="index"
-        class="country-dropdown--item"
+        class="flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700"
         :class="{
-          active: country.id === activeCountryCode,
-          focus: index === selectedIndex,
+          'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
+          'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
         }"
         @click="onSelectCountry(country)"
       >
@@ -74,10 +94,8 @@
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 export default {
-  mixins: [keyboardEventListenerMixins],
   props: {
     value: {
       type: [String, Number],
@@ -102,15 +120,6 @@ export default {
   },
   data() {
     return {
-      countries: [
-        {
-          name: 'Select Country',
-          dial_code: '',
-          emoji: '',
-          id: '',
-        },
-        ...countries,
-      ],
       selectedIndex: -1,
       showDropdown: false,
       searchCountry: '',
@@ -120,6 +129,20 @@ export default {
     };
   },
   computed: {
+    countries() {
+      return [
+        {
+          name: this.dropdownFirstItemName,
+          dial_code: '',
+          emoji: '',
+          id: '',
+        },
+        ...countries,
+      ];
+    },
+    dropdownFirstItemName() {
+      return this.activeCountryCode ? 'Clear selection' : 'Select Country';
+    },
     filteredCountriesBySearch() {
       return this.countries.filter(country => {
         const { name, dial_code, id } = country;
@@ -154,12 +177,8 @@ export default {
     },
   },
   mounted() {
-    window.addEventListener('mouseup', this.onOutsideClick);
     this.setActiveCountry();
   },
-  beforeDestroy() {
-    window.removeEventListener('mouseup', this.onOutsideClick);
-  },
   methods: {
     onOutsideClick(e) {
       if (
@@ -177,28 +196,14 @@ export default {
     onBlur(e) {
       this.$emit('blur', e.target.value);
     },
-    dropdownItem() {
-      if (!this.showDropdown) return [];
-      return Array.from(
-        this.$refs.dropdown.querySelectorAll(
-          'div.country-dropdown div.country-dropdown--item'
-        )
-      );
-    },
-    focusedItem() {
-      if (!this.showDropdown) return [];
-      return Array.from(
-        this.$refs.dropdown.querySelectorAll('div.country-dropdown div.focus')
-      );
-    },
-    focusedItemIndex() {
-      if (!this.showDropdown) return -1;
-      return Array.from(this.dropdownItem()).indexOf(this.focusedItem()[0]);
+    onSearchCountry() {
+      // Reset selected index to 0
+      this.selectedIndex = 0;
     },
     moveUp() {
       if (!this.showDropdown) return;
       this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
+      this.scrollToSelected();
     },
     moveDown() {
       if (!this.showDropdown) return;
@@ -206,14 +211,27 @@ export default {
         this.selectedIndex + 1,
         this.filteredCountriesBySearch.length - 1
       );
-      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
+      this.scrollToSelected();
+    },
+    scrollToSelected() {
+      this.$nextTick(() => {
+        const dropdown = this.$refs.dropdown;
+        const selectedItem = this.$refs.dropdownItem[this.selectedIndex];
+        const dropdownSearchbarHeight = 40;
+        if (selectedItem) {
+          const selectedItemTop = selectedItem.offsetTop;
+          dropdown.scrollTop = selectedItemTop - dropdownSearchbarHeight;
+        }
+      });
     },
     onSelectCountry(country) {
+      if (!country || !this.showDropdown) return;
       this.activeCountryCode = country.id;
       this.searchCountry = '';
       this.activeDialCode = country.dial_code;
       this.$emit('setCode', country.dial_code);
       this.closeDropdown();
+      this.$refs.phoneNumberInput.focus();
     },
     setActiveCountry() {
       const { phoneNumber } = this;
@@ -224,33 +242,6 @@ export default {
         this.activeDialCode = number.countryCallingCode;
       }
     },
-    getKeyboardEvents() {
-      return {
-        ArrowUp: {
-          action: e => {
-            e.preventDefault();
-            this.moveUp();
-          },
-          allowOnFocusedInput: true,
-        },
-        ArrowDown: {
-          action: e => {
-            e.preventDefault();
-            this.moveDown();
-          },
-          allowOnFocusedInput: true,
-        },
-        Enter: {
-          action: e => {
-            e.preventDefault();
-            this.onSelectCountry(
-              this.filteredCountriesBySearch[this.selectedIndex]
-            );
-          },
-          allowOnFocusedInput: true,
-        },
-      };
-    },
     toggleCountryDropdown() {
       this.showDropdown = !this.showDropdown;
       this.selectedIndex = -1;
@@ -267,46 +258,3 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-.phone-input--wrap {
-  .phone-input {
-    @apply flex items-center dark:bg-slate-900 justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
-
-    &.has-error {
-      @apply border border-solid border-red-400 dark:border-red-400;
-    }
-  }
-
-  .phone-input--field {
-    @apply mb-0 rounded-tl-none rounded-bl-none border-0 w-full dark:bg-slate-900 text-base px-1.5;
-
-    &::placeholder {
-      @apply font-normal;
-    }
-  }
-
-  .country-dropdown {
-    @apply z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900;
-
-    .dropdown-search--wrap {
-      @apply top-0 sticky bg-white dark:bg-slate-900 p-1;
-
-      .dropdown-search {
-        @apply h-8 mb-0 text-sm border border-solid border-slate-200 dark:border-slate-600;
-      }
-    }
-
-    .country-dropdown--item {
-      @apply flex items-center h-7 py-0 px-1 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700;
-
-      &.active {
-        @apply bg-slate-50 dark:bg-slate-700;
-      }
-
-      &.focus {
-        @apply bg-slate-25 dark:bg-slate-800;
-      }
-    }
-  }
-}
-</style>