FIX: search escape handler should be on keydown (#25364)
The keydown event fires as soon as the key is pressed down. This is often preferred for actions that need to occur immediately, like stopping a process, closing a modal window, or canceling an ongoing operation. The immediacy of keydown makes it more responsive, as the user doesn't have to fully press and release the key. Moreover, it allows us to not close chat on escape when the search menu is open.
This commit is contained in:
parent
108aff663e
commit
f669a6fa4c
|
@ -6,6 +6,7 @@
|
|||
placeholder={{i18n "search.title"}}
|
||||
aria-label={{i18n "search.title"}}
|
||||
{{on "keyup" this.onKeyup}}
|
||||
{{on "keydown" this.onKeydown}}
|
||||
{{on "input" this.updateSearchTerm}}
|
||||
{{on "focus" @openSearchMenu}}
|
||||
{{did-insert this.focus}}
|
||||
|
|
|
@ -49,6 +49,15 @@ export default class SearchTerm extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
@action
|
||||
onKeydown(e) {
|
||||
if (e.key === "Escape") {
|
||||
this.args.closeSearchMenu();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
onKeyup(e) {
|
||||
if (
|
||||
|
@ -59,12 +68,6 @@ export default class SearchTerm extends Component {
|
|||
return;
|
||||
}
|
||||
|
||||
if (e.key === "Escape") {
|
||||
this.args.closeSearchMenu();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
this.args.openSearchMenu();
|
||||
|
||||
this.search.handleArrowUpOrDown(e);
|
||||
|
|
|
@ -600,7 +600,7 @@ acceptance("Search - Glimmer - Authenticated", function (needs) {
|
|||
"arrow down sets focus to more results link"
|
||||
);
|
||||
|
||||
await triggerKeyEvent("#search-term", "keyup", "Escape");
|
||||
await triggerKeyEvent("#search-term", "keydown", "Escape");
|
||||
assert.strictEqual(
|
||||
document.activeElement,
|
||||
query("#search-button"),
|
||||
|
|
|
@ -43,7 +43,7 @@ module("Integration | Component | search-menu", function (hooks) {
|
|||
"search result is a list of topics"
|
||||
);
|
||||
|
||||
await triggerKeyEvent("#search-term", "keyup", "Escape");
|
||||
await triggerKeyEvent("#search-term", "keydown", "Escape");
|
||||
|
||||
assert.notOk(exists(".menu-panel"), "Menu panel is gone");
|
||||
|
||||
|
|
Loading…
Reference in New Issue