Merge pull request #486 from jxzho/master

Optimizing the flashing issue when select-option selected.
FightingDesign · Jun 14, 2024 · ddf33ae · ddf33ae
2 parents b063e31 + 22abe13
commit ddf33ae
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/packages/fighting-design/option/src/option.vue b/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,10 +46,17 @@
     if (!parentInject) {
       return false
     }
+    
+    // Trigger 展示状态高优先级
+    if (!triggerInject?.isVisible()) {
+      return false
+    }
 
     // 在过滤属性存在并且是正在输入中，执行过滤操作
-    if (parentInject.filter && parentInject.isFiltering && currentLabel) {
-      return currentLabel.toString().includes(parentInject.inputValue)
+    if (parentInject.filter || parentInject.isFiltering) {
+      return currentLabel
+        ? currentLabel.toString().includes(parentInject.inputValue)
+        : false
     }
 
     return true

diff --git a/packages/fighting-design/select/src/select.vue b/packages/fighting-design/select/src/select.vue
@@ -121,8 +121,8 @@
       inputValue,
       isFiltering,
       onBeforeChange: prop.onBeforeChange,
-      modelValue: toRef(prop, 'modelValue'),
-      filter: toRef(prop, 'filter')
+      modelValue,
+      filter: prop.filter
     })
   )
 </script>

diff --git a/packages/fighting-design/trigger/src/interface.ts b/packages/fighting-design/trigger/src/interface.ts
@@ -20,4 +20,5 @@ export type TriggerChange = (visible: boolean, evt: MouseEvent) => void
  */
 export interface TriggerProvide {
   close: HandleMouse
+  isVisible: () => boolean
 }
diff --git a/packages/fighting-design/trigger/src/trigger.vue b/packages/fighting-design/trigger/src/trigger.vue
@@ -29,7 +29,10 @@
    *
    * 目前仅为了在 dropdown-item 组件中实现点击关闭
    */
-  provide<TriggerProvide>(TRIGGER_CLOSE_KEY, { close })
+  provide<TriggerProvide>(TRIGGER_CLOSE_KEY, {
+    close,
+    isVisible: () => visible.value
+  })
 
   // 向外导出关闭方法
   defineExpose({ close })