Merge pull request #7 from nextcloud-deps/fix/a11y-clear-kb-focus

src/components/Select.vue

@@ -1039,6 +1039,7 @@ export default {
         })
       )
       this.$emit('option:deselected', option)
+      this.searchEl.focus()
     },
 
     /**
@@ -1047,6 +1048,7 @@ export default {
      */
     clearSelection() {
       this.updateValue(this.multiple ? [] : null)
+      this.searchEl.focus()
     },
 
     /**

tests/unit/Deselecting.spec.js

@@ -112,6 +112,20 @@ describe('Removing values', () => {
     expect(deselect).not.toHaveBeenCalledWith('one')
   })
 
+  it('should return focus to the search input after deselect', () => {
+    const Select = selectWithProps({
+      multiple: true,
+      options: ['one', 'two', 'three'],
+      value: ['one'],
+    })
+
+    const deselect = Select.findComponent({ ref: 'deselectButtons' })
+    deselect.trigger('click')
+
+    const input = Select.findComponent({ ref: 'search' })
+    expect(document.activeElement).toEqual(input.element)
+  })
+
   describe('Clear button', () => {
     it('should be displayed on single select when value is selected', () => {
       const Select = selectWithProps({
@@ -156,5 +170,18 @@ describe('Removing values', () => {
         'disabled'
       )
     })
+
+    it('should return focus to the search input after clear', () => {
+      const Select = selectWithProps({
+        options: ['foo', 'bar'],
+        value: 'foo',
+      })
+
+      const clear = Select.findComponent({ ref: 'clearButton' })
+      clear.trigger('click')
+
+      const input = Select.findComponent({ ref: 'search' })
+      expect(document.activeElement).toEqual(input.element)
+    })
   })
 })