fix(VSelect): close menu on tab out

fixes #5774
vuetifyjs · Dec 12, 2018 · 8a2a1a1 · 8a2a1a1
1 parent d3bc050
commit 8a2a1a1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VSelect/VSelect.js b/packages/vuetify/src/components/VSelect/VSelect.js
@@ -256,11 +256,12 @@ export default {
 
   methods: {
     /** @public */
-    blur () {
+    blur (e) {
       this.isMenuActive = false
       this.isFocused = false
       this.$refs.input && this.$refs.input.blur()
       this.selectedIndex = -1
+      this.onBlur(e)
     },
     /** @public */
     activateMenu () {
@@ -646,7 +647,7 @@ export default {
         // If we make it here,
         // the user has no selected indexes
         // and is probably tabbing out
-        VTextField.methods.onBlur.call(this, e)
+        this.blur(e)
       }
     },
     selectItem (item) {

diff --git a/packages/vuetify/test/unit/components/VSelect/VSelect3.spec.js b/packages/vuetify/test/unit/components/VSelect/VSelect3.spec.js
@@ -194,4 +194,28 @@ test('VSelect', ({ mount, compileToFunctions }) => {
     expect(menu.nudgeBottom).toBe(5)
     expect(menu.nudgeLeft).toBe(5)
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/5774
+  it('should close menu on tab down when no selectedIndex', async () => {
+    const wrapper = mount(VSelect, {
+      propsData: {
+        items: ['foo', 'bar']
+      }
+    })
+
+    const menu = wrapper.first('.v-input__slot')
+    const input = wrapper.first('input')
+
+    menu.trigger('click')
+
+    expect(wrapper.vm.isFocused).toBe(true)
+    expect(wrapper.vm.isMenuActive).toBe(true)
+
+    input.trigger('keydown.tab')
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isFocused).toBe(false)
+    expect(wrapper.vm.isMenuActive).toBe(false)
+  })
 })