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,6 +43,11 @@ const onEnterPress = () => {
 </script>
 
 <template>
+    <div
+        @mouseover="focus = true"
+        @mouseleave="focus = false"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
+    >
         <QInput
             ref="vnInputRef"
             v-model="value"
@@ -50,13 +55,20 @@ const onEnterPress = () => {
             type="text"
             :class="{ required: $attrs.required }"
             @keyup.enter="onEnterPress()"
-        :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 #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>

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">