fix(v-select): fixed select keyboard functionality (#3134)

when selecting with left and right, should always hide and remove input from updating the
searchValue

fixes #3069

src/components/VSelect/VSelect-tags.spec.js

@@ -293,6 +293,10 @@ test('VSelect - tags', ({ mount, compileToFunctions }) => {
  expect(change).toHaveBeenCalledWith(['foo'])
  expect(wrapper.vm.selectedIndex).toBe(0)
 
+ // Must be reset for input to update
+ wrapper.vm.selectedIndex = -1
+ await wrapper.vm.$nextTick()
+
  input.element.value = 'baz'
  await wrapper.vm.$nextTick()
  input.trigger('input')
@@ -347,4 +351,55 @@ test('VSelect - tags', ({ mount, compileToFunctions }) => {
 
  expect('Unable to locate target [data-app]').toHaveBeenTipped()
  })
+
+ it('should not change search when selecting an index', () => {
+ const wrapper = mount(VSelect, {
+ attachToDocument: true,
+ propsData: {
+ chips: true,
+ multiple: true,
+ tags: true,
+ value: ['foo', 'bar']
+ }
+ })
+
+ const input = wrapper.find('input')[0]
+
+ input.trigger('focus')
+ expect(wrapper.vm.selectedIndex).toBe(-1)
+
+ input.trigger('keydown.left')
+ expect(wrapper.vm.selectedIndex).toBe(1)
+
+ input.element.value = 'fizz'
+ input.trigger('input')
+ expect(wrapper.vm.searchValue).toBe(null)
+
+ input.trigger('keydown.right')
+ expect(wrapper.vm.selectedIndex).toBe(-1)
+
+ input.element.value = 'fizz'
+ input.trigger('input')
+ expect(wrapper.vm.searchValue).toBe('fizz')
+
+ expect('Unable to locate target [data-app]').toHaveBeenTipped()
+ })
+
+ it('should reset selected index when clicked', () => {
+ const wrapper = mount(VSelect, {
+ propsData: {
+ items: ['foo']
+ }
+ })
+
+ const input = wrapper.find('input')[0]
+
+ wrapper.vm.selectedIndex = 0
+ input.trigger('focus')
+ expect(wrapper.vm.selectedIndex).toBe(0)
+ wrapper.trigger('click')
+ expect(wrapper.vm.selectedIndex).toBe(-1)
+
+ expect('Unable to locate target [data-app]').toHaveBeenTipped()
+ })
 })

src/components/VSelect/mixins/select-computed.js

@@ -21,7 +21,8 @@ export default {
  'input-group--multi-line': this.multiLine,
  'input-group--chips': this.chips,
  'input-group--multiple': this.multiple,
- 'input-group--open': this.menuIsVisible
+ 'input-group--open': this.menuIsVisible,
+ 'input-group--select--selecting-index': this.selectedIndex > -1
  }
 
  if (this.hasError) {

src/components/VSelect/mixins/select-events.js

@@ -45,7 +45,9 @@ export default {
  return this.showMenuItems()
  }
 
- this.focus()
+ this.selectedIndex > -1
+ ? (this.selectedIndex = -1)
+ : this.focus()
  },
  focus: e => {
  if (this.disabled || this.readonly || this.isFocused) {

src/components/VSelect/mixins/select-generators.js

@@ -125,6 +125,8 @@ export default {
  data.on = {
  ...this.genListeners(),
  input: e => {
+ if (this.selectedIndex > -1) return
+
  this.searchValue = this.unmaskText(e.target.value)
  }
  }

src/stylus/components/_select.styl

@@ -40,6 +40,10 @@ theme(selects, "input-group--select")
  display: inline-block
  opacity: 1
 
+ &.input-group--select--selecting-index
+ .input-group--select__autocomplete
+ opacity: 0
+
  &.input-group--open
  .input-group__append-icon:not(.input-group__icon-clearable)
  transform: rotate(-180deg)