mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Change all keyup events to keydown (#935)
For a few reasons: - event.preventDefault() for the Enter key (to stop it from submitting the form when you select an item) is only effective if it's a keydown event. - Using keydown for up/down navigation means you can hold them down to rapidly scroll through a lot of items. - Keydown events make the UX feel more responsive, and is consistent with how most apps/operating systems handle key presses.
This commit is contained in:
@@ -852,16 +852,10 @@
|
|||||||
case 9:
|
case 9:
|
||||||
// tab
|
// tab
|
||||||
return this.onTab();
|
return this.onTab();
|
||||||
}
|
case 13:
|
||||||
},
|
// enter.prevent
|
||||||
|
e.preventDefault();
|
||||||
/**
|
return this.typeAheadSelect();
|
||||||
* Search 'input' KeyBoardEvent handler.
|
|
||||||
* @param e {KeyboardEvent}
|
|
||||||
* @return {Function}
|
|
||||||
*/
|
|
||||||
onSearchKeyUp (e) {
|
|
||||||
switch (e.keyCode) {
|
|
||||||
case 27:
|
case 27:
|
||||||
// esc
|
// esc
|
||||||
return this.onEscape();
|
return this.onEscape();
|
||||||
@@ -873,10 +867,6 @@
|
|||||||
// down.prevent
|
// down.prevent
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return this.typeAheadDown();
|
return this.typeAheadDown();
|
||||||
case 13:
|
|
||||||
// enter.prevent
|
|
||||||
e.preventDefault();
|
|
||||||
return this.typeAheadSelect();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -955,7 +945,6 @@
|
|||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
'keydown': this.onSearchKeyDown,
|
'keydown': this.onSearchKeyDown,
|
||||||
'keyup': this.onSearchKeyUp,
|
|
||||||
'blur': this.onSearchBlur,
|
'blur': this.onSearchBlur,
|
||||||
'focus': this.onSearchFocus,
|
'focus': this.onSearchFocus,
|
||||||
'input': (e) => this.search = e.target.value
|
'input': (e) => this.search = e.target.value
|
||||||
|
|||||||
+1
-1
@@ -13,7 +13,7 @@ export const searchSubmit = (Wrapper, searchText = false) => {
|
|||||||
if (searchText) {
|
if (searchText) {
|
||||||
Wrapper.vm.search = searchText;
|
Wrapper.vm.search = searchText;
|
||||||
}
|
}
|
||||||
Wrapper.find({ ref: "search" }).trigger("keyup.enter")
|
Wrapper.find({ ref: "search" }).trigger("keydown.enter")
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -109,14 +109,14 @@ describe("Toggling Dropdown", () => {
|
|||||||
expect(spy).toHaveBeenCalled();
|
expect(spy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("should remove existing search text on escape keyup", () => {
|
it("should remove existing search text on escape keydown", () => {
|
||||||
const Select = selectWithProps({
|
const Select = selectWithProps({
|
||||||
value: [{ label: "one" }],
|
value: [{ label: "one" }],
|
||||||
options: [{ label: "one" }]
|
options: [{ label: "one" }]
|
||||||
});
|
});
|
||||||
|
|
||||||
Select.vm.search = "foo";
|
Select.vm.search = "foo";
|
||||||
Select.find('.vs__search').trigger('keyup.esc')
|
Select.find('.vs__search').trigger('keydown.esc')
|
||||||
expect(Select.vm.search).toEqual("");
|
expect(Select.vm.search).toEqual("");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ describe("Moving the Typeahead Pointer", () => {
|
|||||||
|
|
||||||
Select.vm.typeAheadPointer = 1;
|
Select.vm.typeAheadPointer = 1;
|
||||||
|
|
||||||
Select.find({ ref: "search" }).trigger("keyup.up");
|
Select.find({ ref: "search" }).trigger("keydown.up");
|
||||||
|
|
||||||
expect(Select.vm.typeAheadPointer).toEqual(0);
|
expect(Select.vm.typeAheadPointer).toEqual(0);
|
||||||
});
|
});
|
||||||
@@ -33,7 +33,7 @@ describe("Moving the Typeahead Pointer", () => {
|
|||||||
|
|
||||||
Select.vm.typeAheadPointer = 1;
|
Select.vm.typeAheadPointer = 1;
|
||||||
|
|
||||||
Select.find({ ref: "search" }).trigger("keyup.down");
|
Select.find({ ref: "search" }).trigger("keydown.down");
|
||||||
|
|
||||||
expect(Select.vm.typeAheadPointer).toEqual(2);
|
expect(Select.vm.typeAheadPointer).toEqual(2);
|
||||||
});
|
});
|
||||||
@@ -53,7 +53,7 @@ describe("Moving the Typeahead Pointer", () => {
|
|||||||
|
|
||||||
Select.vm.typeAheadPointer = 1;
|
Select.vm.typeAheadPointer = 1;
|
||||||
|
|
||||||
Select.find({ ref: "search" }).trigger("keyup.up");
|
Select.find({ ref: "search" }).trigger("keydown.up");
|
||||||
expect(spy).toHaveBeenCalled();
|
expect(spy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -63,7 +63,7 @@ describe("Moving the Typeahead Pointer", () => {
|
|||||||
|
|
||||||
Select.vm.typeAheadPointer = 1;
|
Select.vm.typeAheadPointer = 1;
|
||||||
|
|
||||||
Select.find({ ref: "search" }).trigger("keyup.down");
|
Select.find({ ref: "search" }).trigger("keydown.down");
|
||||||
expect(spy).toHaveBeenCalled();
|
expect(spy).toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user