feat(VCombobox): add always-filter prop (#22093)

closes #22060

Author: jcjp

packages/api-generator/src/locale/en/VCombobox.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "alwaysFilter": "When enabled, dropdown list will always show items matching non-empty value within the field. Recommended when the list is meant to show suggestions rather than options to choose from. For optimal UX, should be combined with `:menu-icon=\"false\"` and `hide-selected`.",
     "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.",
     "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.",
     "itemChildren": "This property currently has **no effect**.",

packages/docs/src/data/new-in.json

@@ -60,6 +60,7 @@
   },
   "VCombobox": {
     "props": {
+      "alwaysFilter": "3.10.4",
       "autocomplete": "3.10.0",
       "clearOnSelect": "3.5.0",
       "listProps": "3.5.0"

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -63,6 +63,7 @@ type Value <T, ReturnObject extends boolean, Multiple extends boolean> =
     : Val<T, ReturnObject> | null
 
 export const makeVComboboxProps = propsFactory({
+  alwaysFilter: Boolean,
   autoSelectFirst: {
     type: [Boolean, String] as PropType<boolean | 'exact'>,
   },
@@ -189,7 +190,11 @@ export const VCombobox = genericComponent<new <
         : (props.multiple ? model.value.length : search.value.length)
     })
 
-    const { filteredItems, getMatches } = useFilter(props, items, () => isPristine.value ? '' : search.value)
+    const { filteredItems, getMatches } = useFilter(
+      props,
+      items,
+      () => props.alwaysFilter || !isPristine.value ? search.value : ''
+    )
 
     const displayItems = computed(() => {
       if (props.hideSelected) {

packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx

@@ -771,6 +771,22 @@ describe('VCombobox', () => {
     expect(model.value).toEqual(expected)
   })
 
+  it('should show only matching items when reopening the menu if alwaysFilter is true', async () => {
+    const { element } = render(() => (
+      <VCombobox alwaysFilter items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']} />
+    ))
+
+    await userEvent.click(element)
+    await userEvent.keyboard('c')
+    await expect(screen.findAllByRole('option')).resolves.toHaveLength(2)
+    await userEvent.keyboard('al')
+    await expect(screen.findAllByRole('option')).resolves.toHaveLength(1)
+    await userEvent.click(document.body)
+    await expect.poll(() => screen.queryAllByRole('option')).toHaveLength(0)
+    await userEvent.click(element)
+    await expect.poll(() => screen.queryAllByRole('option')).toHaveLength(1)
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })