Fixed #5833 - MultiSelect / Listbox / Dropdown: Unable to use some navigation keys when editable is true

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', () => {

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);
+                const target = event.currentTarget;
-                this.focusedOptionIndex = -1;
+
+                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);
+                if (event.shiftKey) {
-                this.focusedOptionIndex = -1;
+                    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());
 

components/lib/listbox/Listbox.vue

@@ -452,8 +452,14 @@ export default {
         },
         onHomeKey(event, pressedInInputText = false) {
             if (pressedInInputText) {
-                event.currentTarget.setSelectionRange(0, 0);
+                const target = event.currentTarget;
-                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();
@@ -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);
+                if (event.shiftKey) {
-                this.focusedOptionIndex = -1;
+                    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();

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);
+                if (event.shiftKey) {
-                this.focusedOptionIndex = -1;
+                    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);
+                if (event.shiftKey) {
-                this.focusedOptionIndex = -1;
+                    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();