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

@@ -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()

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 }) => {

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 }) => {

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)
     }