diff --git a/components/lib/dropdown/Dropdown.spec.js b/components/lib/dropdown/Dropdown.spec.js index 6f9397e27..7a4d343c6 100644 --- a/components/lib/dropdown/Dropdown.spec.js +++ b/components/lib/dropdown/Dropdown.spec.js @@ -89,6 +89,14 @@ describe('clear checks', () => { it('should have correct icon', () => { expect(wrapper.find('.p-dropdown-clear-icon').classes()).toContain('pi-discord'); }); + + it('should clear with delete key', async () => { + const updateModelSpy = vi.spyOn(wrapper.vm, 'updateModel'); + + await wrapper.find('.p-dropdown-label.p-inputtext').trigger('keydown', { code: 'Delete' }); + expect(updateModelSpy).toHaveBeenCalledOnce(); + expect(updateModelSpy).toHaveBeenCalledWith(expect.any(KeyboardEvent), null); + }); }); describe('editable checks', () => { diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue index 77585dce6..8ddebed14 100755 --- a/components/lib/dropdown/Dropdown.vue +++ b/components/lib/dropdown/Dropdown.vue @@ -339,6 +339,9 @@ export default { this.onArrowLeftKey(event, this.editable); break; + case 'Delete': + this.onDeleteKey(event); + case 'Home': this.onHomeKey(event, this.editable); break; @@ -507,6 +510,12 @@ export default { break; } }, + onDeleteKey(event) { + if (this.showClear) { + this.updateModel(event, null); + event.preventDefault(); + } + }, onArrowDownKey(event) { const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();