fix: 修复 f-select 组件在筛选之后，直接失去焦点关闭下拉选项再次打开时依然显示过滤的内容问题

CHANGELOG.md

@@ -11,6 +11,8 @@
 - `f-textarea` 组件 Enter 事件默认改为换行，ctrl + Enter 为提交事件，会执行 `on-enter` 事件
 - 修复 `f-select` 组件在绑定值为空的时候没有清空输入框的问题
 - 优化 `f-up-load` 语法 [#492](https://github.com/FightingDesign/fighting-design/pull/492)
+- 修复 `f-select` 组件动态变更响应试丢失问题
+- 修复 `f-select` 组件在筛选之后，直接失去焦点关闭下拉选项再次打开时依然显示过滤的内容问题
 
 ## 1.0.0-alpha.8 (2024-06-12)
 

packages/fighting-design/option/src/option.vue

@@ -21,7 +21,7 @@
   const parentInject: SelectProvide | null = inject(SELECT_PROPS_TOKEN, null)
   /** 获取到 trigger 注入的依赖项 */
   const triggerInject: TriggerProvide | null = inject(TRIGGER_CLOSE_KEY, null)
-  
+
   /** 获取插槽内容 */
   const slotLabel = computed((): string => {
     if (!slot.default) {
@@ -46,14 +46,19 @@
     if (!parentInject) {
       return false
     }
-    
+
     // Trigger 展示状态高优先级
     if (!triggerInject?.isVisible()) {
       return false
     }
 
+    // 关闭了触发器，全部显示
+    if (!parentInject.isTrigger) {
+      return true
+    }
+
     // 在过滤属性存在并且是正在输入中，执行过滤操作
-    if (parentInject.filter || parentInject.isFiltering) {
+    if (parentInject.filter && parentInject.isFiltering) {
       return currentLabel
         ? currentLabel.toString().includes(parentInject.inputValue)
         : false
@@ -171,24 +176,22 @@
     }
 
     if (currentValue === parentInject.modelValue) {
+      console.log('run')
       parentInject && run(parentInject.setValue, currentValue, currentLabel)
     }
   }
 
   /**
    * 监听一次数据的变化更新值，避免数据是异步设置的
-   *
-   * 只需要监听一次即可
    */
   const setWatch = (): void => {
     if (!parentInject) {
       return
     }
 
-    watch(() => parentInject.modelValue, setInit, { once: true })
+    watch(() => parentInject.modelValue, setInit, { immediate: true })
   }
 
-  setInit() // 初始化设置选中的值
   setWatch() // 开始监听器
 </script>
 

packages/fighting-design/select/src/interface.ts

@@ -27,17 +27,20 @@ export type SelectBeforeChange = (value: SelectModelValue, label: SelectModelVal
 /**
  * 提供给子组件注入的依赖项类型接口
  *
- * @param { Function } setValue 设置新的选中值
  * @param { Object } modelValue 绑定的值
  * @param { boolean } filter 绑定的值
+ * @param { boolean } isTrigger 是否触发
  * @param { boolean } isFiltering 是否正在搜索
  * @param { string } inputValue 文本框绑定的值
+ * @param { Function } setValue 设置新的选中值
+ * @param { Function } onBeforeChange 在值改变之前执行的回调
  */
 export interface SelectProvide {
-  setValue: SelectChange
   modelValue: SelectModelValue
-  onBeforeChange: SelectBeforeChange
   filter: boolean
+  isTrigger: boolean
   isFiltering: boolean
   inputValue: string
+  setValue: SelectChange
+  onBeforeChange: SelectBeforeChange
 }

packages/fighting-design/select/src/select.vue

@@ -7,6 +7,7 @@
   import { FSvgIcon } from '../../svg-icon'
   import { FEmpty } from '../../empty'
   import { FIconChevronDown } from '../../_svg'
+  import type { HandleChange } from '../../_interface'
   import type { SelectProvide, SelectModelValue } from './interface'
 
   defineOptions({ name: 'FSelect' })
@@ -32,6 +33,8 @@
   const inputValue = ref('')
   /** 是否正在输入过滤搜索中 */
   const isFiltering = ref(false)
+  /** 是否触发 */
+  const isTrigger = ref(false)
 
   /**
    * 设置新的值
@@ -65,9 +68,11 @@
   }
 
   /** 下拉菜单开启之后的回调 */
-  const dropdownOpen = async (): Promise<void> => {
+  const dropdownOpen: HandleChange = async (target): Promise<void> => {
     await nextTick()
 
+    isTrigger.value = target
+
     /** 获取到当前选中的元素 */
     const activeNode = selectContentRef.value?.querySelector('.f-option.f-option__active')
 
@@ -87,6 +92,14 @@
     }
   }
 
+  /**
+   * 下拉菜单关闭之后的回调
+   */
+  const dropdownClose: HandleChange = (target): void => {
+    isTrigger.value = target
+    isFiltering.value = target
+  }
+
   /**
    * 文本框失去焦点
    */
@@ -130,6 +143,7 @@
       inputValue,
       isFiltering,
       modelValue,
+      isTrigger,
       filter: prop.filter,
       setValue,
       onBeforeChange: prop.onBeforeChange
@@ -139,7 +153,13 @@
 
 <template>
   <div class="f-select" :style="style">
-    <f-dropdown trigger="click" :disabled :width :on-open="dropdownOpen">
+    <f-dropdown
+      trigger="click"
+      :disabled
+      :width
+      :on-open="dropdownOpen"
+      :on-close="dropdownClose"
+    >
       <f-input
         v-model="inputValue"
         :readonly="!filter"

packages/fighting-design/trigger/src/trigger.vue

@@ -31,7 +31,7 @@
    */
   provide<TriggerProvide>(TRIGGER_CLOSE_KEY, {
     close,
-    isVisible: () => visible.value
+    isVisible: (): boolean => visible.value
   })
 
   // 向外导出关闭方法

start/src/App.vue

@@ -1,14 +1,25 @@
 <script lang="ts" setup>
   import { ref } from 'vue'
-  const value = ref('1')
+  const value = ref('')
+
+  // setTimeout(() => {
+  //   value.value = '1'
+  //   setTimeout(() => {
+  //     value.value = '3'
+  //     setTimeout(() => {
+  //       value.value = ''
+  //     }, 1000)
+  //   }, 1000)
+  // }, 1000)
 </script>
 
 <template>
-  <f-input v-model="value" clear></f-input>
-  <f-select v-model="value" placeholder="请选择……" clear filter>
-    <f-option :value="1">香蕉</f-option>
-    <f-option :value="2">苹果</f-option>
-    <f-option :value="3">哈密瓜</f-option>
-    <f-option :value="4">樱桃</f-option>
+  <!-- <f-input v-model="value" clear></f-input> -->
+  <h1>{{ value || '无' }}</h1>
+  <f-select v-model="value" placeholder="请选择……" filter>
+    <f-option value="1">香蕉</f-option>
+    <f-option value="2">苹果</f-option>
+    <f-option value="3">哈密瓜</f-option>
+    <f-option value="4">樱桃</f-option>
   </f-select>
 </template>