From 1509d573dfdeb968ce590ee796cf1a06d69ccbc9 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Fri, 7 Jun 2024 11:01:06 +0300 Subject: [PATCH] Fixed #5833 - MultiSelect / Listbox / Dropdown: Unable to use some navigation keys when editable is true --- components/lib/dropdown/Dropdown.spec.js | 8 ------ components/lib/dropdown/Dropdown.vue | 30 ++++++++++++---------- components/lib/listbox/Listbox.vue | 21 +++++++++++---- components/lib/multiselect/MultiSelect.vue | 26 +++++++++++-------- 4 files changed, 48 insertions(+), 37 deletions(-) diff --git a/components/lib/dropdown/Dropdown.spec.js b/components/lib/dropdown/Dropdown.spec.js index 7a4d343c6..6f9397e27 100644 --- a/components/lib/dropdown/Dropdown.spec.js +++ b/components/lib/dropdown/Dropdown.spec.js @@ -89,14 +89,6 @@ 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 462b990f1..5fb7b7ada 100755 --- a/components/lib/dropdown/Dropdown.vue +++ b/components/lib/dropdown/Dropdown.vue @@ -361,9 +361,6 @@ export default { this.onArrowLeftKey(event, this.editable); break; - case 'Delete': - this.onDeleteKey(event); - case 'Home': this.onHomeKey(event, this.editable); break; @@ -540,12 +537,6 @@ export default { break; } }, - onDeleteKey(event) { - if (this.showClear) { - this.updateModel(event, null); - event.preventDefault(); - } - }, onArrowDownKey(event) { if (!this.overlayVisible) { this.show(); @@ -580,8 +571,14 @@ export default { }, onHomeKey(event, pressedInInputText = false) { if (pressedInInputText) { - event.currentTarget.setSelectionRange(0, 0); - this.focusedOptionIndex = -1; + const target = event.currentTarget; + + if (event.shiftKey) { + target.setSelectionRange(0, event.target.selectionStart); + } else { + target.setSelectionRange(0, 0); + this.focusedOptionIndex = -1; + } } else { this.changeFocusedOptionIndex(event, this.findFirstOptionIndex()); @@ -593,10 +590,15 @@ export default { onEndKey(event, pressedInInputText = false) { if (pressedInInputText) { const target = event.currentTarget; - const len = target.value.length; - target.setSelectionRange(len, len); - this.focusedOptionIndex = -1; + if (event.shiftKey) { + target.setSelectionRange(event.target.selectionStart, target.value.length); + } else { + const len = target.value.length; + + target.setSelectionRange(len, len); + this.focusedOptionIndex = -1; + } } else { this.changeFocusedOptionIndex(event, this.findLastOptionIndex()); diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue index 97b62dc2a..a62f1a27c 100755 --- a/components/lib/listbox/Listbox.vue +++ b/components/lib/listbox/Listbox.vue @@ -452,8 +452,14 @@ export default { }, onHomeKey(event, pressedInInputText = false) { if (pressedInInputText) { - event.currentTarget.setSelectionRange(0, 0); - this.focusedOptionIndex = -1; + const target = event.currentTarget; + + if (event.shiftKey) { + target.setSelectionRange(0, event.target.selectionStart); + } else { + target.setSelectionRange(0, 0); + this.focusedOptionIndex = -1; + } } else { let metaKey = event.metaKey || event.ctrlKey; let optionIndex = this.findFirstOptionIndex(); @@ -470,10 +476,15 @@ export default { onEndKey(event, pressedInInputText = false) { if (pressedInInputText) { const target = event.currentTarget; - const len = target.value.length; - target.setSelectionRange(len, len); - this.focusedOptionIndex = -1; + if (event.shiftKey) { + target.setSelectionRange(event.target.selectionStart, target.value.length); + } else { + const len = target.value.length; + + target.setSelectionRange(len, len); + this.focusedOptionIndex = -1; + } } else { let metaKey = event.metaKey || event.ctrlKey; let optionIndex = this.findLastOptionIndex(); diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue index 444ee0be4..fc47ac4dc 100755 --- a/components/lib/multiselect/MultiSelect.vue +++ b/components/lib/multiselect/MultiSelect.vue @@ -602,13 +602,15 @@ export default { pressedInInputText && (this.focusedOptionIndex = -1); }, onHomeKey(event, pressedInInputText = false) { - const { currentTarget } = event; - if (pressedInInputText) { - const len = currentTarget.value.length; + const target = event.currentTarget; - currentTarget.setSelectionRange(0, event.shiftKey ? len : 0); - this.focusedOptionIndex = -1; + if (event.shiftKey) { + target.setSelectionRange(0, event.target.selectionStart); + } else { + target.setSelectionRange(0, 0); + this.focusedOptionIndex = -1; + } } else { let metaKey = event.metaKey || event.ctrlKey; let optionIndex = this.findFirstOptionIndex(); @@ -625,13 +627,17 @@ export default { event.preventDefault(); }, onEndKey(event, pressedInInputText = false) { - const { currentTarget } = event; - if (pressedInInputText) { - const len = currentTarget.value.length; + const target = event.currentTarget; - currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len); - this.focusedOptionIndex = -1; + if (event.shiftKey) { + target.setSelectionRange(event.target.selectionStart, target.value.length); + } else { + const len = target.value.length; + + target.setSelectionRange(len, len); + this.focusedOptionIndex = -1; + } } else { let metaKey = event.metaKey || event.ctrlKey; let optionIndex = this.findLastOptionIndex();