fix(select): add showMenu to SelectProvider and update visibility logic

Author: haoziqaq

packages/varlet-ui/src/option/Option.vue

@@ -82,11 +82,14 @@ export default defineComponent({
     const disabled = computed(() => props.disabled)
     const ripple = computed(() => props.ripple)
     const { select, bindSelect } = useSelect()
-    const { pattern, filter, filterable, multiple, focusColor, onSelect, computeLabel } = select
+    const { pattern, showMenu, filter, filterable, multiple, focusColor, onSelect, computeLabel } = select
     const { hovering, handleHovering } = useHoverOverlay()
-
     const labelVNode = computed<any>(() => (isFunction(props.label) ? option.value : props.label))
-    const visible = computed(() => !filterable.value || !pattern.value || filter.value(pattern.value, option.value))
+    const frozenVisible = ref(true)
+    const visibleByFilter = computed(
+      () => !filterable.value || !pattern.value || filter.value(pattern.value, option.value),
+    )
+    const visible = computed(() => (showMenu.value ? visibleByFilter.value : frozenVisible.value))
 
     const optionProvider: OptionProvider = {
       label: labelVNode,
@@ -99,6 +102,16 @@ export default defineComponent({
 
     watch([() => props.label, () => props.value], computeLabel)
 
+    watch(
+      () => [showMenu.value, visibleByFilter.value] as const,
+      () => {
+        if (showMenu.value) {
+          frozenVisible.value = visibleByFilter.value
+        }
+      },
+      { immediate: true },
+    )
+
     bindSelect(optionProvider)
 
     useEventListener(() => window, 'keydown', handleKeydown)

packages/varlet-ui/src/select/Select.vue

@@ -170,7 +170,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, nextTick, ref, watch } from 'vue'
-import { assert, call, doubleRaf, isArray, isEmpty, isFunction, preventDefault } from '@varlet/shared'
+import { assert, call, isArray, isEmpty, isFunction, preventDefault } from '@varlet/shared'
 import { useEventListener } from '@varlet/use'
 import VarChip from '../chip'
 import VarFieldDecorator from '../field-decorator'
@@ -283,6 +283,7 @@ export default defineComponent({
 
     const selectProvider: SelectProvider = {
       pattern: computed(() => pattern.value),
+      showMenu: computed(() => showMenu.value),
       multiple,
       filterable,
       filter,
@@ -471,10 +472,8 @@ export default defineComponent({
 
       if (!multiple) {
         root.value!.focus()
-        doubleRaf().then(() => {
-          showMenu.value = false
-          pattern.value = ''
-        })
+        showMenu.value = false
+        pattern.value = ''
       }
     }
 

packages/varlet-ui/src/select/provide.ts

@@ -8,6 +8,7 @@ export const SELECT_BIND_OPTION_KEY = Symbol('SELECT_BIND_OPTION_KEY')
 
 export interface SelectProvider extends Validation {
   pattern: ComputedRef<string>
+  showMenu: ComputedRef<boolean>
   multiple: ComputedRef<boolean>
   filterable: ComputedRef<boolean>
   filter: ComputedRef<FilterMethod>

packages/varlet-ui/types/select.d.ts

@@ -20,7 +20,7 @@ export type SelectOptionLabelRender = (option: SelectOption, checked: boolean) =
 
 export type SelectOptionLabel = string | VNode | SelectOptionLabelRender
 
-export type FilterMethod = (pattern: string, option: SelectOption) => boolean
+export type SelectFilterMethod = (pattern: string, option: SelectOption) => boolean
 
 export interface SelectOption {
   label?: SelectOptionLabel
@@ -55,7 +55,7 @@ export interface SelectProps extends BasicAttributes {
   rules?: SelectRules
   tabindex?: SelectHTMLAttributes['tabindex']
   filterable?: boolean
-  filter?: FilterMethod
+  filter?: SelectFilterMethod
   onFocus?: ListenerProp<(e: Event) => void>
   onBlur?: ListenerProp<(e: Event) => void>
   onClick?: ListenerProp<(e: Event) => void>