refactor(VSelects): implement better fix for #18556

current implementation causes menu to hide and show during search causing a menu flicker
vuetifyjs · Feb 27, 2024 · 12c9e27 · 12c9e27
1 parent c0f061b
commit 12c9e27
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 27 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -396,16 +396,10 @@ export const VAutocomplete = genericComponent<new <
       }
     })
 
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return
 
-      if (!val.length && props.hideNoData) {
-        menu.value = false
-      }
-
-      if (!oldVal.length && val.length) {
-        menu.value = true
-      }
+      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
@@ -532,6 +532,19 @@ describe('VAutocomplete', () => {
     })
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/18556
+  it('should show menu if focused and items are added', () => {
+    cy
+      .mount(props => (<VAutocomplete { ...props } />))
+      .get('.v-autocomplete input')
+      .focus()
+      .get('.v-overlay')
+      .should('not.exist')
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-overlay')
+      .should('exist')
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -423,16 +423,10 @@ export const VCombobox = genericComponent<new <
       }
     })
 
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return
 
-      if (!val.length && props.hideNoData) {
-        menu.value = false
-      }
-
-      if (!oldVal.length && val.length) {
-        menu.value = true
-      }
+      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
@@ -652,6 +652,19 @@ describe('VCombobox', () => {
       })
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/18556
+  it('should show menu if focused and items are added', () => {
+    cy
+      .mount(props => (<VCombobox { ...props } />))
+      .get('.v-combobox input')
+      .focus()
+      .get('.v-overlay')
+      .should('not.exist')
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-overlay')
+      .should('exist')
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -304,16 +304,10 @@ export const VSelect = genericComponent<new <
       }
     })
 
-    watch(displayItems, (val, oldVal) => {
-      if (!isFocused.value) return
+    watch(() => props.items, val => {
+      if (!isFocused.value || !val.length || menu.value) return
 
-      if (!val.length && props.hideNoData) {
-        menu.value = false
-      }
-
-      if (!oldVal.length && val.length) {
-        menu.value = true
-      }
+      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
@@ -571,6 +571,19 @@ describe('VSelect', () => {
     })
   })
 
+  // https://github.com/vuetifyjs/vuetify/issues/18556
+  it('should show menu if focused and items are added', () => {
+    cy
+      .mount(props => (<VSelect { ...props } />))
+      .get('.v-select input')
+      .focus()
+      .get('.v-overlay')
+      .should('not.exist')
+      .setProps({ items: ['Foo', 'Bar'] })
+      .get('.v-overlay')
+      .should('exist')
+  })
+
   describe('Showcase', () => {
     generate({ stories })
   })