V-Autocomplete: hide-no-data also controls opening menu upon item update

fixes #4663
vuetifyjs · Sep 4, 2018 · f9bc110 · f9bc110
1 parent 9443264
commit f9bc110
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/components/VAutocomplete/VAutocomplete.js b/src/components/VAutocomplete/VAutocomplete.js
@@ -174,12 +174,15 @@ export default {
 
       this.lazySearch = null
     },
-    items (val) {
+    items (val, oldVal) {
       // If we are focused, the menu
-      // is not active and items change
+      // is not active, hide no data is enabled,
+      // and items change
       // User is probably async loading
       // items, try to activate the menu
       if (
+        !(oldVal && oldVal.length) &&
+        this.hideNoData &&
         this.isFocused &&
         !this.isMenuActive &&
         val.length

diff --git a/test/unit/components/VAutocomplete/VAutocomplete.spec.js b/test/unit/components/VAutocomplete/VAutocomplete.spec.js
@@ -230,20 +230,6 @@ test('VAutocomplete.js', ({ mount, shallow, compileToFunctions }) => {
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isMenuActive).toBe(false)
-
-    wrapper.setProps({
-      items: [
-        { text: 'Foo', value: 1 },
-        { text: 'Bar', value: 2 }
-      ]
-    })
-
-    await wrapper.vm.$nextTick()
-
-    // Once items refresh active will
-    // be updated to openif already
-    // focused
-    expect(wrapper.vm.isMenuActive).toBe(true)
   })
 
   it('should change selected index', async () => {
@@ -721,7 +707,7 @@ test('VAutocomplete.js', ({ mount, shallow, compileToFunctions }) => {
     expect(input.element.value).toBe('foo')
   })
 
-  it('should show menu when items are added and hide-no-data', async () => {
+  it('should show menu when items are added for the first time and hide-no-data is enabled', async () => {
     const wrapper = mount(VAutocomplete, {
       propsData: {
         hideNoData: true,
@@ -744,4 +730,28 @@ test('VAutocomplete.js', ({ mount, shallow, compileToFunctions }) => {
 
     expect(wrapper.vm.isMenuActive).toBe(true)
   })
+
+  it('should not show menu when items are updated and hide-no-data is enabled ', async () => {
+    const wrapper = mount(VAutocomplete, {
+      propsData: {
+        hideNoData: true,
+        items: [ 'Something first' ]
+      }
+    })
+
+    const input = wrapper.first('input')
+
+    input.trigger('focus')
+
+    expect(wrapper.vm.isMenuActive).toBe(false)
+    expect(wrapper.vm.isFocused).toBe(true)
+
+    wrapper.setProps({
+      items: ['Foo', 'Bar']
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isMenuActive).toBe(false)
+  })
 })