From bd88bfb0fe87cdec3832b1a9d51a29dcf76e64da Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 4 Oct 2024 15:09:42 +0530
Subject: [PATCH] fix: emits for FormSelect and PhoneInput component (#10226)

---
 .../components/widgets/forms/PhoneInput.vue       | 15 ++++++++-------
 .../conversation/contact/ContactForm.vue          |  4 ----
 app/javascript/v3/components/Form/Select.vue      | 12 ++++++------
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
index 4f7bba148..8c7a4351e 100644
--- a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
+++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
@@ -8,7 +8,7 @@ import {
 
 export default {
   props: {
-    value: {
+    modelValue: {
       type: [String, Number],
       default: '',
     },
@@ -29,7 +29,7 @@ export default {
       default: false,
     },
   },
-  emits: ['blur', 'input', 'setCode'],
+  emits: ['blur', 'setCode', 'update:modelValue'],
   data() {
     return {
       selectedIndex: -1,
@@ -37,7 +37,7 @@ export default {
       searchCountry: '',
       activeCountryCode: getActiveCountryCode(),
       activeDialCode: getActiveDialCode(),
-      phoneNumber: this.value,
+      phoneNumber: this.modelValue,
     };
   },
   computed: {
@@ -76,12 +76,12 @@ export default {
     },
   },
   watch: {
-    value() {
-      const number = parsePhoneNumber(this.value);
+    modelValue() {
+      const number = parsePhoneNumber(this.modelValue);
       if (number) {
         this.activeCountryCode = number.country;
         this.activeDialCode = `+${number.countryCallingCode}`;
-        this.phoneNumber = this.value.replace(
+        this.phoneNumber = this.modelValue.replace(
           `+${number.countryCallingCode}`,
           ''
         );
@@ -103,7 +103,8 @@ export default {
     },
     onChange(e) {
       this.phoneNumber = e.target.value;
-      this.$emit('input', e.target.value, this.activeDialCode);
+      this.$emit('update:modelValue', e.target.value);
+      this.$emit('setCode', this.activeDialCode);
     },
     onBlur(e) {
       this.$emit('blur', e.target.value);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index e0d02b28a..7eda1efb3 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -201,9 +201,6 @@ export default {
       }
       return contactObject;
     },
-    onPhoneNumberInputChange(value, code) {
-      this.activeDialCode = code;
-    },
     setPhoneCode(code) {
       if (this.phoneNumber !== '' && this.parsePhoneNumber) {
         const dialCode = this.parsePhoneNumber.countryCallingCode;
@@ -336,7 +333,6 @@ export default {
             :value="phoneNumber"
             :error="isPhoneNumberNotValid"
             :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
-            @input="onPhoneNumberInputChange"
             @blur="v$.phoneNumber.$touch"
             @set-code="setPhoneCode"
           />
diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
index febbf0277..3cfef8da7 100644
--- a/app/javascript/v3/components/Form/Select.vue
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -29,7 +29,7 @@ export default {
       type: String,
       required: true,
     },
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -42,10 +42,10 @@ export default {
       default: '',
     },
   },
-  emits: ['input'],
+  emits: ['update:modelValue'],
   methods: {
     onInput(e) {
-      this.$emit('input', e.target.value);
+      this.$emit('update:modelValue', e.target.value);
     },
   },
 };
@@ -61,11 +61,11 @@ export default {
   >
     <select
       :id="id"
-      :selected="value"
+      :selected="modelValue"
       :name="name"
       :class="{
-        'text-ash-400': !value,
-        'text-ash-900': value,
+        'text-ash-400': !modelValue,
+        'text-ash-900': modelValue,
         'pl-9': icon,
       }"
       class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-ash-200 ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"