fix: Escape key in keyboard shortcut guide should clear search input if search term

app/components/InputSearch.js

@@ -22,7 +22,9 @@ type Props = {
   collectionId?: string,
   redirectDisabled?: boolean,
   maxWidth?: string,
+  value: string,
   onChange: (event: SyntheticInputEvent<>) => mixed,
+  onKeyDown: (event: SyntheticKeyboardEvent<>) => mixed,
   t: TFunction,
 };
 
@@ -59,7 +61,7 @@ class InputSearch extends React.Component<Props> {
   };
 
   render() {
-    const { t, redirectDisabled, onChange } = this.props;
+    const { t, redirectDisabled, value, onChange, onKeyDown } = this.props;
     const { theme, placeholder = `${t("Search")}…` } = this.props;
 
     return (
@@ -68,7 +70,9 @@ class InputSearch extends React.Component<Props> {
         type="search"
         placeholder={placeholder}
         onInput={redirectDisabled ? undefined : this.handleSearchInput}
+        value={value}
         onChange={onChange}
+        onKeyDown={onKeyDown}
         icon={
           <SearchIcon
             color={this.focused ? theme.inputBorderFocused : theme.inputBorder}

app/scenes/KeyboardShortcuts.js

@@ -347,16 +347,30 @@ function KeyboardShortcuts() {
   const [searchTerm, setSearchTerm] = React.useState("");
 
   const handleChange = React.useCallback((event) => {
-    setSearchTerm(event.target.value.toLowerCase());
+    setSearchTerm(event.target.value);
+  }, []);
+
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.target.value && event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      setSearchTerm("");
+    }
   }, []);
 
   return (
     <Flex column>
-      <Input type="search" onChange={handleChange} redirectDisabled />
+      <Input
+        type="search"
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        value={searchTerm}
+        redirectDisabled
+      />
       {categories.map((category, x) => {
         const filtered = searchTerm
           ? category.items.filter((item) =>
-              item.label.toLowerCase().includes(searchTerm)
+              item.label.toLowerCase().includes(searchTerm.toLowerCase())
             )
           : category.items;