Revert "fix(VCombobox): filter matching items when opening first time"

This reverts commit eeb9d14.

fixes #22077

Author: KaelWD

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

@@ -128,7 +128,6 @@ export const VCombobox = genericComponent<new <
     const isFocused = shallowRef(false)
     const isPristine = shallowRef(true)
     const listHasFocus = shallowRef(false)
-    const showAllItemsForNoMatch = shallowRef(false)
     const vMenuRef = ref<VMenu>()
     const vVirtualScrollRef = ref<VVirtualScroll>()
     const selectionIndex = shallowRef(-1)
@@ -190,27 +189,19 @@ export const VCombobox = genericComponent<new <
         : (props.multiple ? model.value.length : search.value.length)
     })
 
-    const { filteredItems, getMatches } = useFilter(props, items, search)
-
-    const hasMatchingItems = computed(() => {
-      return props.hideSelected
-        ? filteredItems.value.some(filteredItem => !model.value.some(s => s.value === filteredItem.value))
-        : filteredItems.value.length > 0
-    })
+    const { filteredItems, getMatches } = useFilter(props, items, () => isPristine.value ? '' : search.value)
 
     const displayItems = computed(() => {
       if (props.hideSelected) {
         return filteredItems.value.filter(filteredItem => !model.value.some(s => s.value === filteredItem.value))
       }
-      if (filteredItems.value.length === 0 && showAllItemsForNoMatch.value) {
-        return items.value
-      }
       return filteredItems.value
     })
 
-    const menuDisabled = computed(() => {
-      return form.isReadonly.value || form.isDisabled.value
-    })
+    const menuDisabled = computed(() => (
+      (props.hideNoData && !displayItems.value.length) ||
+      form.isReadonly.value || form.isDisabled.value
+    ))
     const _menu = useProxiedModel(props, 'menu')
     const menu = computed({
       get: () => _menu.value,
@@ -224,18 +215,14 @@ export const VCombobox = genericComponent<new <
     const { menuId, ariaExpanded, ariaControls, ariaLabel } = useMenuActivator(props, menu)
 
     watch(_search, value => {
-      showAllItemsForNoMatch.value = false
       if (cleared) {
         // wait for clear to finish, VTextField sets _search to null
         // then search computed triggers and updates _search to ''
         nextTick(() => (cleared = false))
       } else if (isFocused.value && !menu.value) {
-        menu.value = hasMatchingItems.value || !props.hideNoData
-      } else if (isFocused.value && menu.value && !hasMatchingItems.value && props.hideNoData) {
-        menu.value = false
+        menu.value = true
       }
 
-      isPristine.value = !value
       emit('update:search', value)
     })
 
@@ -453,22 +440,16 @@ export const VCombobox = genericComponent<new <
       }
     })
 
-    watch(menu, val => {
-      if (!props.hideSelected && val && model.value.length) {
+    watch(menu, () => {
+      if (!props.hideSelected && menu.value && model.value.length) {
         const index = displayItems.value.findIndex(
           item => model.value.some(s => (props.valueComparator || deepEqual)(s.value, item.value))
         )
         IN_BROWSER && window.requestAnimationFrame(() => {
           index >= 0 && vVirtualScrollRef.value?.scrollToIndex(index)
         })
       }
-
-      if (val && search.value && !hasMatchingItems.value) {
-        showAllItemsForNoMatch.value = true
-      }
-
-      isPristine.value = !search.value
-    }, { immediate: true })
+    })
 
     watch(items, (newVal, oldVal) => {
       if (menu.value) return
@@ -560,6 +541,7 @@ export const VCombobox = genericComponent<new <
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
                         <VListItem key="no-data" title={ t(props.noDataText) } />
                       ))}
+
                       <VVirtualScroll ref={ vVirtualScrollRef } renderless items={ displayItems.value } itemKey="value">
                         { ({ item, index, itemRef }) => {
                           const itemProps = mergeProps(item.props, {
@@ -715,7 +697,7 @@ export const VCombobox = genericComponent<new <
             'append-inner': (...args) => (
               <>
                 { slots['append-inner']?.(...args) }
-                { props.menuIcon ? (
+                { (!props.hideNoData || props.items.length) && props.menuIcon ? (
                   <VIcon
                     class="v-combobox__menu-icon"
                     color={ vTextFieldRef.value?.fieldIconColor }

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

@@ -238,33 +238,6 @@ describe('VCombobox', () => {
       await userEvent.keyboard('antonsen')
       await expect(screen.findByRole('option')).resolves.toHaveTextContent('Antonsen PK')
     })
-
-    // https://github.com/vuetifyjs/vuetify/pull/22045
-    it('should keep menu open while typing', async () => {
-      const items = ['Item 1', 'Item 1a', 'Another']
-
-      const { element } = render(() => (
-        <VCombobox items={ items } multiple />
-      ))
-
-      const optionsPerAction = [
-        ['1', 2],
-        ['a', 1],
-        ['x', 0],
-        ['y', 0],
-        ['{Backspace}', 0],
-        ['{Backspace}', 1],
-        ['{Backspace}', 2],
-        ['{Backspace}', 3],
-      ] as const
-
-      await userEvent.click(element)
-      await expect(screen.findAllByRole('option')).resolves.toHaveLength(3)
-      for (const [text, expectedItemsCount] of optionsPerAction) {
-        await userEvent.keyboard(text)
-        await expect.poll(() => screen.queryAllByRole('option')).toHaveLength(expectedItemsCount)
-      }
-    })
   })
 
   describe('prefilled data', () => {
@@ -798,41 +771,6 @@ describe('VCombobox', () => {
     expect(model.value).toEqual(expected)
   })
 
-  it('should show only matching items when reopening the menu', async () => {
-    const { element } = render(() => (
-      <VCombobox 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)
-  })
-
-  it('should show only matching items when opening for the first time', async () => {
-    const model = ref('flor')
-    const { element } = render(() => (
-      <VCombobox
-        v-model={ model.value }
-        items={['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']}
-      />
-    ))
-
-    await userEvent.click(element)
-    expect(screen.getAllByRole('option')).toHaveLength(1)
-    await userEvent.click(document.body)
-    await expect.poll(() => screen.queryAllByRole('option')).toHaveLength(0)
-
-    // expect same behavior when re-opening the menu
-    await userEvent.click(element)
-    await expect.poll(() => screen.queryAllByRole('option')).toHaveLength(1)
-  })
-
   describe('Showcase', () => {
     generate({ stories })
   })