From 0387d59e390cf76ac0aff1237f52501fea8ab1f8 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 3 Oct 2024 08:57:37 +0530
Subject: [PATCH] fix: eslint issue on ref

---
 .eslintrc.js                                         | 2 +-
 app/javascript/widget/components/Form/PhoneInput.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 3c191b7b7..cf4d1e7e1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['airbnb-base/legacy', 'prettier', 'plugin:vue/recommended'],
+  extends: ['airbnb-base/legacy', 'prettier', 'plugin:vue/vue3-recommended'],
   plugins: ['html', 'prettier'],
   rules: {
     'prettier/prettier': ['error'],
diff --git a/app/javascript/widget/components/Form/PhoneInput.vue b/app/javascript/widget/components/Form/PhoneInput.vue
index 667480da1..878b1f69d 100644
--- a/app/javascript/widget/components/Form/PhoneInput.vue
+++ b/app/javascript/widget/components/Form/PhoneInput.vue
@@ -1,4 +1,7 @@
 <script setup>
+// eslint-disable no-unused-refs
+// We are using `useTemplateRef` introduced in Vue 3.5,
+// It's already fixed, but not released yet: https://github.com/vuejs/eslint-plugin-vue/issues/2547
 import { ref, computed, watch, useTemplateRef, nextTick, unref } from 'vue';
 import countriesList from 'shared/constants/countries.js';
 import { useDarkMode } from 'widget/composables/useDarkMode';
@@ -271,8 +274,8 @@ function onSelect() {
     >
       <div class="sticky top-0" :class="dropdownBackgroundClass">
         <input
-          v-model="searchCountry"
           ref="searchbar"
+          v-model="searchCountry"
           type="text"
           :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
           class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"