From d305b1c190aa20b3187c5a816b284de35c6e3fb9 Mon Sep 17 00:00:00 2001
From: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:55:34 +0800
Subject: [PATCH] fix(select): [select] Fix the issue of ineffective use of
 noMatchText attribute in custom filtering of select component (#1118)

---
 examples/sites/demos/pc/app/select/filter-method.spec.ts | 6 +++---
 packages/renderless/src/option/index.ts                  | 4 +---
 packages/renderless/src/option/vue.ts                    | 9 ++++++++-
 packages/renderless/src/select/index.ts                  | 1 -
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/examples/sites/demos/pc/app/select/filter-method.spec.ts b/examples/sites/demos/pc/app/select/filter-method.spec.ts
index 7d9f7826f..43ab488db 100644
--- a/examples/sites/demos/pc/app/select/filter-method.spec.ts
+++ b/examples/sites/demos/pc/app/select/filter-method.spec.ts
@@ -53,12 +53,12 @@ test('自定义过滤', async ({ page }) => {
 
   // 1.1 没有过滤到内容
   await input.click()
-  // 1.1.1 验证 no-match-text (待修复)
-  // await expect(page.getByText('No Match')).toBeHidden()
+  // 1.1.1 验证 no-match-text
+  await expect(page.getByText('No Match')).toBeHidden()
   await input.press('1')
   await expect(input).toHaveValue('1')
   await input.press('Enter')
-  // await expect(page.getByText('No Match')).toBeVisible()
+  await expect(page.getByText('No Match')).toBeVisible()
 
   await page.waitForTimeout(500)
   let allListItems = await option.all()
diff --git a/packages/renderless/src/option/index.ts b/packages/renderless/src/option/index.ts
index dda165a86..243ff67eb 100644
--- a/packages/renderless/src/option/index.ts
+++ b/packages/renderless/src/option/index.ts
@@ -59,11 +59,9 @@ export const selectOptionClick =
   }
 
 export const queryChange =
-  ({ select, props, state }) =>
+  ({ props, state }) =>
   (query) => {
     state.visible = new RegExp(escapeRegexpString(query), 'i').test(state.currentLabel) || props.created
-
-    select.state.filteredOptionsCount += state.visible ? 1 : -1
   }
 
 export const toggleEvent = ({ props, vm, type }) => {
diff --git a/packages/renderless/src/option/vue.ts b/packages/renderless/src/option/vue.ts
index 6d93b9271..f75a409d7 100644
--- a/packages/renderless/src/option/vue.ts
+++ b/packages/renderless/src/option/vue.ts
@@ -66,7 +66,7 @@ const initApi = ({ api, props, state, select, constants, vm }) => {
     isEqual: isEqual({ select, state }),
     contains: contains({ select, state }),
     hoverItem: hoverItem({ select, vm, props, state }),
-    queryChange: queryChange({ select, props, state }),
+    queryChange: queryChange({ props, state }),
     selectOptionClick: selectOptionClick({ constants, vm, props, state, select }),
     handleGroupDisabled: handleGroupDisabled(state),
     initValue: initValue({ select, props, constants, vm })
@@ -102,6 +102,13 @@ const initWatch = ({ watch, props, state, select, constants }) => {
       }
     }
   )
+
+  watch(
+    () => state.visible,
+    () => {
+      select.state.filteredOptionsCount += state.visible ? 1 : -1
+    }
+  )
 }
 
 const initOnMounted = ({ onMounted, props, api, vm, state, constants, select }) => {
diff --git a/packages/renderless/src/select/index.ts b/packages/renderless/src/select/index.ts
index e14b92b26..b7bb79e4e 100644
--- a/packages/renderless/src/select/index.ts
+++ b/packages/renderless/src/select/index.ts
@@ -124,7 +124,6 @@ export const defaultOnQueryChange =
       props.filterMethod(value)
       state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup, constants.EVENT_NAME.queryChange)
     } else {
-      state.filteredOptionsCount = state.optionsCount
       state.selectEmitter.emit(constants.EVENT_NAME.queryChange, value)
     }