diff --git a/src/components/Select.vue b/src/components/Select.vue index 60c4e460..7daf15a0 100644 --- a/src/components/Select.vue +++ b/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() }, /** diff --git a/tests/unit/Deselecting.spec.js b/tests/unit/Deselecting.spec.js index 1a1497fc..011c178a 100755 --- a/tests/unit/Deselecting.spec.js +++ b/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) + }) }) })