fix(VSelect): dont open menu on its own when items change (#21247)

fixes #21205

Co-authored-by: Kael <[email protected]>

Author: arvi-nagaraj

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -367,7 +367,7 @@ export const VSelect = genericComponent<new <
     watch(() => props.items, (newVal, oldVal) => {
       if (menu.value) return
 
-      if (isFocused.value && !oldVal.length && newVal.length) {
+      if (isFocused.value && props.hideNoData && !oldVal.length && newVal.length) {
         menu.value = true
       }
     })

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

@@ -6,7 +6,7 @@ import { VListItem } from '@/components/VList'
 // Utilities
 import { commands, generate, render, screen, userEvent } from '@test'
 import { getAllByRole } from '@testing-library/vue'
-import { cloneVNode, ref } from 'vue'
+import { cloneVNode, nextTick, ref } from 'vue'
 
 const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
 const densities = ['default', 'comfortable', 'compact'] as const
@@ -587,16 +587,32 @@ describe('VSelect', () => {
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/18556
-  it('should show menu if focused and items are added', async () => {
-    const { rerender } = render(VSelect)
+  // https://github.com/vuetifyjs/vuetify/issues/21205
+  it('should show menu if focused and items are added when hideNoData is true"', async () => {
+    const items = ref()
+    render(() => <VSelect items={ items.value } hideNoData />)
 
     await userEvent.keyboard('{Tab}')
     expect(screen.queryByRole('listbox')).toBeNull()
 
-    await rerender({ items: ['Foo', 'Bar'] })
+    items.value = ['Foo', 'Bar']
+    await nextTick()
     await expect.poll(() => screen.queryByRole('listbox')).toBeVisible()
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/21205
+  it('should not show menu if focused and items are added when hideNoData is false', async () => {
+    const items = ref()
+    render(() => <VSelect items={ items.value } />)
+
+    await userEvent.keyboard('{Tab}')
+    expect(screen.queryByRole('listbox')).toBeNull()
+
+    items.value = ['Foo', 'Bar']
+    await nextTick()
+    await expect.poll(() => screen.queryByRole('listbox')).toBeNull()
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/19346
   it('should not show menu when focused and existing non-empty items are changed', async () => {
     const { element, rerender } = render(VSelect, {