feat(VSelect): add update:listIndex event to VSelect

update:listIndex added to VSelect to indicate when keyboard-selected item is changed
vuetifyjs · Jul 15, 2019 · 62a4957 · 62a4957
1 parent 2578f23
commit 62a4957
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 1 deletion.
diff --git a/packages/api-generator/src/variables.js b/packages/api-generator/src/variables.js
@@ -193,6 +193,10 @@ const VSelect = {
       name: 'update:searchInput',
       value: 'string',
     },
+    {
+      name: 'update:listIndex',
+      value: 'number',
+    },
     ...inputEvents,
     ...textEvents,
   ].concat(validatableEvents),

diff --git a/packages/docs/src/lang/en/components/Autocompletes.json b/packages/docs/src/lang/en/components/Autocompletes.json
@@ -62,7 +62,7 @@
     "click:prepend": "Components.Inputs.events['click:prepend']",
     "click:prepend-inner": "Components.TextFields.events['click:prepend-inner']",
     "update:error": "Mixins.Validatable.events['update:error']",
-    "update:menuListIndex": "Emitted when menu item is selected using keyboard arrows",
+    "update:listIndex": "Emitted when menu item is selected using keyboard arrows",
     "update:searchInput": "The `search-input.sync` event"
   }
 }
diff --git a/packages/docs/src/lang/en/components/Selects.json b/packages/docs/src/lang/en/components/Selects.json
@@ -100,6 +100,7 @@
     "click:prepend": "Components.Inputs.events['click:prepend']",
     "click:prepend-inner": "Components.TextFields.events['click:prepend-inner']",
     "update:error": "Mixins.Validatable.events['update:error']",
+    "update:listIndex": "Emitted when menu item is selected using keyboard arrows",
     "update:searchInput": "The `search-input.sync` event"
   }
 }
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts
@@ -486,4 +486,24 @@ describe('VAutocomplete.ts', () => {
 
     expect(wrapper.vm.genSelections()).toEqual([])
   })
+
+  it('should emit listIndex event when navigated by keyboard', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['foo', 'bar'],
+      },
+    })
+
+    const listIndexUpdate = jest.fn()
+    wrapper.vm.$on('update:listIndex', listIndexUpdate)
+
+    const input = wrapper.find('input')
+    const slot = wrapper.find('.v-input__slot')
+    slot.trigger('click')
+
+    input.trigger('keydown.down')
+    expect(listIndexUpdate).toBeCalledWith(0)
+    input.trigger('keydown.down')
+    expect(listIndexUpdate).toBeCalledWith(1)
+  })
 })
diff --git a/packages/vuetify/src/components/VSelect/VSelect.ts b/packages/vuetify/src/components/VSelect/VSelect.ts
@@ -604,6 +604,7 @@ export default baseMixins.extend<options>().extend({
       // listIndex change from menu
       if (this.isMenuActive && keyCode !== keyCodes.tab) {
         menu.changeListIndex(e)
+        this.$emit('update:listIndex', menu.listIndex)
       }
 
       // If menu is not active, up and down can do