From 19140b8d5c10cdc16095b965bfaa79d664958440 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Tue, 27 Aug 2024 00:41:41 +0800
Subject: [PATCH] feat: wip

---
 .../src/auto-complete/AutoComplete.vue        | 63 +++++++++++++++----
 .../src/auto-complete/example/index.vue       |  1 -
 packages/varlet-ui/src/select/Select.vue      |  2 +
 3 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/packages/varlet-ui/src/auto-complete/AutoComplete.vue b/packages/varlet-ui/src/auto-complete/AutoComplete.vue
index 429c3f46e4d..6557352a57f 100644
--- a/packages/varlet-ui/src/auto-complete/AutoComplete.vue
+++ b/packages/varlet-ui/src/auto-complete/AutoComplete.vue
@@ -4,7 +4,6 @@
     :class="n()"
     :tabindex="disabled || formDisabled ? undefined : '0'"
     @focusin="handleFocus"
-    @focusout="handleBlur"
     @click="handleClick"
   >
     <var-menu-select
@@ -12,6 +11,7 @@
       placement="bottom"
       same-width
       auto-complete-cover
+      :disabled="disabled || formDisabled || readonly || formReadonly"
       :class="n('menu-select')"
       :popover-class="variant === 'standard' && hint ? n('--standard-menu-margin') : undefined"
       v-model:show="isShowMenuSelect"
@@ -20,7 +20,6 @@
       <var-input
         ref="input"
         v-bind="{
-          readonly,
           validateTrigger,
           rules,
           enterkeyhint,
@@ -33,12 +32,15 @@
           hint,
           textColor,
           blurColor,
+          readonly,
           disabled,
           clearable,
         }"
         autocomplete="off"
         :is-force-focusing-effect="isFocusing"
         @input="handleInput"
+        @blur="handleBlur"
+        @clear="handleClear"
         v-model="value"
       >
         <template #prepend-icon v-if="$slots['prepend-icon']">
@@ -49,8 +51,8 @@
           <slot name="append-icon" />
         </template>
 
-        <template #clear-icon v-if="$slots['clear-icon']">
-          <slot name="clear-icon" />
+        <template #clear-icon="{ clear }" v-if="$slots['clear-icon']">
+          <slot name="clear-icon" :clear="clear" />
         </template>
 
         <template #extra-message v-if="$slots['extra-message']">
@@ -107,15 +109,29 @@ export default defineComponent({
     const isShowMenuSelect = ref(false)
     const { bindForm, form } = useForm()
 
+    let clearing = false
+
     const autoCompleteProvider: AutoCompleteProvider = {
       reset,
       resetValidation,
       validate,
     }
 
-    useClickOutside(root, 'click', () => {
-      isShowMenuSelect.value = false
-    })
+    useClickOutside(
+      () => root.value!,
+      'click',
+      () => {
+        // After the clear operation is executed, the clear button will be removed from the component tree,
+        // resulting in a false positive of click outside.
+        if (clearing) {
+          clearing = false
+          return
+        }
+
+        isShowMenuSelect.value = false
+        handleBlur()
+      }
+    )
 
     watch(() => props.options, syncOptions)
 
@@ -139,20 +155,27 @@ export default defineComponent({
     }
 
     function handleKeydown(event: KeyboardEvent) {
-      if (form?.disabled.value || form?.readonly.value || props.disabled || props.readonly || !isFocusing.value) {
+      if (
+        form?.disabled.value ||
+        form?.readonly.value ||
+        props.disabled ||
+        props.readonly ||
+        !isFocusing.value ||
+        !isShowMenuSelect.value
+      ) {
         return
       }
 
       const { key } = event
 
-      if (key === 'Tab' && isShowMenuSelect.value) {
+      if (key === 'Tab') {
         preventDefault(event)
+        root.value!.focus()
         isShowMenuSelect.value = false
-        handleBlur()
         return
       }
 
-      if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(key) && isShowMenuSelect.value) {
+      if (!['ArrowUp', 'ArrowDown', 'Enter'].includes(key)) {
         input.value!.focus()
       }
     }
@@ -171,7 +194,16 @@ export default defineComponent({
       call(props.onInput, newValue, event)
     }
 
+    function handleClear() {
+      clearing = true
+      isShowMenuSelect.value = getShowMenuSelect(value.value!)
+    }
+
     function handleFocus() {
+      if (isFocusing.value) {
+        return
+      }
+
       isFocusing.value = true
       input.value!.focus()
       isShowMenuSelect.value = getShowMenuSelect(value.value ?? '')
@@ -180,12 +212,11 @@ export default defineComponent({
     }
 
     function handleBlur() {
-      if (isShowMenuSelect.value) {
+      if (isShowMenuSelect.value || !isFocusing.value) {
         return
       }
 
       isFocusing.value = false
-      isShowMenuSelect.value = false
       call(props.onBlur)
     }
 
@@ -207,6 +238,10 @@ export default defineComponent({
     }
 
     function handleClick(event: Event) {
+      if (props.disabled || form?.disabled) {
+        return
+      }
+
       call(props.onClick, event)
     }
 
@@ -219,9 +254,11 @@ export default defineComponent({
       isFocusing,
       input,
       formDisabled: form?.disabled,
+      formReadonly: form?.readonly,
       n,
       classes,
       handleInput,
+      handleClear,
       handleFocus,
       handleClick,
       handleBlur,
diff --git a/packages/varlet-ui/src/auto-complete/example/index.vue b/packages/varlet-ui/src/auto-complete/example/index.vue
index 11855688e86..94de9208e76 100644
--- a/packages/varlet-ui/src/auto-complete/example/index.vue
+++ b/packages/varlet-ui/src/auto-complete/example/index.vue
@@ -21,7 +21,6 @@ const options = computed(() =>
 <template>
   <app-type>Mobile phone example code</app-type>
   <var-auto-complete placeholder="auto" clearable :options="options" v-model="value" />
-
   <app-type>Mobile phone example code</app-type>
   <var-auto-complete variant="outlined" clearable placeholder="auto" :options="options" v-model="value" />
 </template>
diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue
index 3c5c9ed3337..8bef23c2c30 100644
--- a/packages/varlet-ui/src/select/Select.vue
+++ b/packages/varlet-ui/src/select/Select.vue
@@ -252,12 +252,14 @@ export default defineComponent({
       }
 
       if (key === 'Escape' && showMenu.value) {
+        root.value!.focus()
         preventDefault(event)
         showMenu.value = false
         return
       }
 
       if (key === 'Tab' && showMenu.value) {
+        root.value!.focus()
         preventDefault(event)
         handleBlur()
         return