fix: Keep focus on input after select to improve accessibility (#1727)

Co-authored-by: Jeff Sagal <sagalbot@gmail.com>

Huge thanks to @Pytal for the great work!

tests/unit/Dropdown.spec.js

@@ -120,12 +120,11 @@ describe('Toggling Dropdown', () => {
 
   it('will close the dropdown on escape, if search is empty', () => {
     const Select = selectWithProps()
-    const spy = jest.spyOn(Select.vm.$refs.search, 'blur')
 
     Select.vm.open = true
     Select.vm.onEscape()
 
-    expect(spy).toHaveBeenCalled()
+    expect(Select.vm.open).toEqual(false)
   })
 
   it('should remove existing search text on escape keydown', () => {

tests/unit/Filtering.spec.js

@@ -83,4 +83,26 @@ describe('Filtering Options', () => {
     Select.vm.search = '1'
     expect(Select.vm.filteredOptions).toEqual([1, 10])
   })
+
+  it('should open dropdown on alphabetic input', async () => {
+    const Select = shallowMount(VueSelect)
+
+    const input = Select.find('.vs__search')
+    input.element.value = 'a'
+    input.trigger('input')
+    await Select.vm.$nextTick()
+
+    expect(Select.vm.open).toEqual(true)
+  })
+
+  it('should open dropdown on numeric input', async () => {
+    const Select = shallowMount(VueSelect)
+
+    const input = Select.find('.vs__search')
+    input.element.value = 1
+    input.trigger('input')
+    await Select.vm.$nextTick()
+
+    expect(Select.vm.open).toEqual(true)
+  })
 })

tests/unit/Selectable.spec.js

@@ -37,6 +37,7 @@ describe('Selectable prop', () => {
       selectable: (option) => option !== 'two',
     })
 
+    Select.vm.open = true
     Select.vm.typeAheadPointer = 1
 
     Select.findComponent({ ref: 'search' }).trigger('keydown.down')
@@ -50,6 +51,7 @@ describe('Selectable prop', () => {
       selectable: (option) => option !== 'two',
     })
 
+    Select.vm.open = true
     Select.vm.typeAheadPointer = 2
 
     Select.findComponent({ ref: 'search' }).trigger('keydown.up')

tests/unit/TypeAhead.spec.js

@@ -20,6 +20,7 @@ describe('Moving the Typeahead Pointer', () => {
   it('should move the pointer visually up the list on up arrow keyUp', () => {
     const Select = mountDefault()
 
+    Select.vm.open = true
     Select.vm.typeAheadPointer = 1
 
     Select.findComponent({ ref: 'search' }).trigger('keydown.up')
@@ -30,6 +31,7 @@ describe('Moving the Typeahead Pointer', () => {
   it('should move the pointer visually down the list on down arrow keyUp', () => {
     const Select = mountDefault()
 
+    Select.vm.open = true
     Select.vm.typeAheadPointer = 1
 
     Select.findComponent({ ref: 'search' }).trigger('keydown.down')
@@ -78,3 +80,23 @@ describe('Moving the Typeahead Pointer', () => {
     expect(Select.vm.typeAheadPointer).toEqual(2)
   })
 })
+
+it('should not move the pointer visually up the list on up arrow keyUp when dropdown is not open', () => {
+  const Select = mountDefault()
+
+  Select.vm.typeAheadPointer = 1
+
+  Select.findComponent({ ref: 'search' }).trigger('keydown.up')
+
+  expect(Select.vm.typeAheadPointer).toEqual(1)
+})
+
+it('should not move the pointer visually down the list on down arrow keyUp when dropdown is not open', () => {
+  const Select = mountDefault()
+
+  Select.vm.typeAheadPointer = 1
+
+  Select.findComponent({ ref: 'search' }).trigger('keydown.down')
+
+  expect(Select.vm.typeAheadPointer).toEqual(1)
+})