From 1e7c8e03dfb04639831565c9382dec6a04cb03ed Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 21 Feb 2024 09:19:06 +0100
Subject: [PATCH] refs #6907 feat: fix_input_clearable_hover

---
 src/components/common/VnInput.vue             | 44 ++++++++++++-------
 src/pages/Customer/Card/CustomerBasicData.vue |  1 -
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 8a01e0bee..0f7ea4e93 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
@@ -26,7 +26,7 @@ const value = computed({
         emit('update:modelValue', value);
     },
 });
-
+const focus = ref(false);
 const styleAttrs = computed(() => {
     return $props.isOutlined
         ? {
@@ -43,20 +43,32 @@ const onEnterPress = () => {
 </script>
 
 <template>
-    <QInput
-        ref="vnInputRef"
-        v-model="value"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        type="text"
-        :class="{ required: $attrs.required }"
-        @keyup.enter="onEnterPress()"
+    <div
+        @mouseover="focus = true"
+        @mouseleave="focus = false"
         :rules="$attrs.required ? [requiredFieldRule] : null"
     >
-        <template v-if="$slots.prepend" #prepend>
-            <slot name="prepend" />
-        </template>
-        <template v-if="$slots.append" #append>
-            <slot name="append" />
-        </template>
-    </QInput>
+        <QInput
+            ref="vnInputRef"
+            v-model="value"
+            v-bind="{ ...$attrs, ...styleAttrs }"
+            type="text"
+            :class="{ required: $attrs.required }"
+            @keyup.enter="onEnterPress()"
+        >
+            <template v-if="$slots.prepend" #prepend>
+                <slot name="prepend" />
+            </template>
+
+            <template #append>
+                <slot name="append" v-if="$slots.append" />
+                <QIcon
+                    name="close"
+                    size="xs"
+                    v-if="focus && value"
+                    @click="value = null"
+                ></QIcon>
+            </template>
+        </QInput>
+    </div>
 </template>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 458d50082..cf0ceaf51 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -69,7 +69,6 @@ const filterOptions = {
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
-                        autofocus
                     />
                 </div>
                 <div class="col">