feat(search): clear input on escape key (#448)

COMPONENT_INDEX.md

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

docs/src/COMPONENT_API.json

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

src/Search/Search.svelte

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

types/Search/Search.d.ts

@@ -97,6 +97,7 @@ export default class Search {
   $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
   $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => 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: string, cb: (event: Event) => void): () => void;
 }