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
+    <div
-        ref="vnInputRef"
+        @mouseover="focus = true"
-        v-model="value"
+        @mouseleave="focus = false"
-        v-bind="{ ...$attrs, ...styleAttrs }"
-        type="text"
-        :class="{ required: $attrs.required }"
-        @keyup.enter="onEnterPress()"
         :rules="$attrs.required ? [requiredFieldRule] : null"
     >
-        <template v-if="$slots.prepend" #prepend>
+        <QInput
-            <slot name="prepend" />
+            ref="vnInputRef"
-        </template>
+            v-model="value"
-        <template v-if="$slots.append" #append>
+            v-bind="{ ...$attrs, ...styleAttrs }"
-            <slot name="append" />
+            type="text"
-        </template>
+            :class="{ required: $attrs.required }"
-    </QInput>
+            @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>

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