src/components/common/VnInput.vue

@@ -26,7 +26,7 @@ const value = computed({
         emit('update:modelValue', value);
     },
 });
-const focus = ref(false);
+const hover = ref(false);
 const styleAttrs = computed(() => {
     return $props.isOutlined
         ? {
@@ -45,6 +45,10 @@ const handleValue = (val = null) => {
     value.value = val;
 };
 
+const focus = () => {
+    vnInputRef.value.focus();
+};
+
 defineExpose({
     focus,
 });
@@ -52,8 +56,8 @@ defineExpose({
 
 <template>
     <div
-        @mouseover="focus = true"
-        @mouseleave="focus = false"
+        @mouseover="hover = true"
+        @mouseleave="hover = false"
         :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <QInput
@@ -74,7 +78,7 @@ defineExpose({
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="focus && value"
+                    v-if="hover && value"
                     @click="handleValue(null)"
                 ></QIcon>
             </template>