feat(search): clear input on escape key

This commit is contained in:
Eric Liu 2020-12-05 14:23:20 -08:00
commit 9256d96492
4 changed files with 10 additions and 0 deletions

View file

@ -2780,6 +2780,7 @@ None.
| input | forwarded | -- | | input | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
| keydown | forwarded | -- |
| clear | dispatched | -- | | clear | dispatched | -- |
## `SearchSkeleton` ## `SearchSkeleton`

View file

@ -2900,6 +2900,7 @@
{ "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "dispatched", "name": "clear" } { "type": "dispatched", "name": "clear" }
], ],
"typedefs": [], "typedefs": [],

View file

@ -120,6 +120,13 @@
}}" }}"
on:focus on:focus
on:blur on:blur
on:keydown
on:keydown="{({ key }) => {
if (key === 'Escape') {
value = '';
dispatch('clear');
}
}}"
/> />
<button <button
type="button" type="button"

View file

@ -97,6 +97,7 @@ export default class Search {
$on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
$on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void;
$on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
$on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
$on(eventname: "clear", cb: (event: CustomEvent<any>) => void): () => void; $on(eventname: "clear", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void;
} }