fix(VSelects): Open menu only when items mutate from an empty array

fixes #19346
vuetifyjs · Mar 12, 2024 · 7b5f229 · 7b5f229
1 parent 2553cb5
commit 7b5f229
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 9 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -399,10 +399,12 @@ export const VAutocomplete = genericComponent<new <
       }
     })
 
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return
+    watch(() => props.items, (newVal, oldVal) => {
+      if (menu.value) return
 
-      menu.value = true
+      if (isFocused.value && !oldVal.length && newVal.length) {
+        menu.value = true
+      }
     })
 
     useRender(() => {

diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
@@ -545,6 +545,21 @@ describe('VAutocomplete', () => {
       .should('exist')
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19346
+  it('should not show menu when focused and existing non-empty items are changed', () => {
+    cy
+      .mount((props: any) => (<VAutocomplete items={ props.items } />))
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-autocomplete')
+      .click()
+      .get('.v-overlay')
+      .should('exist')
+      .get('.v-list-item').eq(1).click({ waitForAnimations: false })
+      .setProps({ items: ['Foo', 'Bar', 'test', 'test 2'] })
+      .get('.v-overlay')
+      .should('not.exist')
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/17573
   // When using selection slot or chips, input displayed next to chip/selection slot should be always empty
   it('should always have empty input value when it is unfocused and when using selection slot or chips', () => {

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -445,10 +445,12 @@ export const VCombobox = genericComponent<new <
       }
     })
 
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return
+    watch(() => props.items, (newVal, oldVal) => {
+      if (menu.value) return
 
-      menu.value = true
+      if (isFocused.value && !oldVal.length && newVal.length) {
+        menu.value = true
+      }
     })
 
     useRender(() => {

diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
@@ -665,6 +665,21 @@ describe('VCombobox', () => {
       .should('exist')
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19346
+  it('should not show menu when focused and existing non-empty items are changed', () => {
+    cy
+      .mount((props: any) => (<VCombobox items={ props.items } />))
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-combobox')
+      .click()
+      .get('.v-overlay')
+      .should('exist')
+      .get('.v-list-item').eq(0).click({ waitForAnimations: false })
+      .setProps({ items: ['Foo', 'Bar', 'test'] })
+      .get('.v-overlay')
+      .should('not.exist')
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/17573
   // When using selection slot or chips, input displayed next to chip/selection slot should be always empty
   it('should always have empty input value when it is unfocused and when using selection slot or chips', () => {

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -313,10 +313,12 @@ export const VSelect = genericComponent<new <
       }
     })
 
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return
+    watch(() => props.items, (newVal, oldVal) => {
+      if (menu.value) return
 
-      menu.value = true
+      if (isFocused.value && !oldVal.length && newVal.length) {
+        menu.value = true
+      }
     })
 
     useRender(() => {

diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -584,6 +584,21 @@ describe('VSelect', () => {
       .should('exist')
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/19346
+  it('should not show menu when focused and existing non-empty items are changed', () => {
+    cy
+      .mount((props: any) => (<VSelect items={ props.items } />))
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-select')
+      .click()
+      .get('.v-overlay')
+      .should('exist')
+      .get('.v-list-item').eq(1).click({ waitForAnimations: false })
+      .setProps({ items: ['Foo', 'Bar', 'test', 'test 2'] })
+      .get('.v-overlay')
+      .should('not.exist')
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })