fix(VCombobox): unstable menu state while typing (#22045)

Author: J-Sek

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

@@ -190,7 +190,13 @@ 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, search)
+
+    const hasMatchingItems = computed(() => {
+      return props.hideSelected
+        ? filteredItems.value.some(filteredItem => !model.value.some(s => s.value === filteredItem.value))
+        : filteredItems.value.length > 0
+    })
 
     const displayItems = computed(() => {
       if (props.hideSelected) {
@@ -202,10 +208,9 @@ export const VCombobox = genericComponent<new <
       return filteredItems.value
     })
 
-    const menuDisabled = computed(() => (
-      (props.hideNoData && !displayItems.value.length) ||
-      form.isReadonly.value || form.isDisabled.value
-    ))
+    const menuDisabled = computed(() => {
+      return form.isReadonly.value || form.isDisabled.value
+    })
     const _menu = useProxiedModel(props, 'menu')
     const menu = computed({
       get: () => _menu.value,
@@ -225,7 +230,9 @@ export const VCombobox = genericComponent<new <
         // then search computed triggers and updates _search to ''
         nextTick(() => (cleared = false))
       } else if (isFocused.value && !menu.value) {
-        menu.value = true
+        menu.value = hasMatchingItems.value || !props.hideNoData
+      } else if (isFocused.value && menu.value && !hasMatchingItems.value && props.hideNoData) {
+        menu.value = false
       }
 
       isPristine.value = !value
@@ -456,7 +463,7 @@ export const VCombobox = genericComponent<new <
         })
       }
 
-      if (val && search.value && filteredItems.value.length === 0) {
+      if (val && search.value && !hasMatchingItems.value) {
         showAllItemsForNoMatch.value = true
       }
 

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

@@ -238,6 +238,33 @@ 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', () => {