add arrow submit button to search page

Author: outofambit

src/components/Icon/index.tsx

@@ -1,5 +1,6 @@
 export type IconKind =
   | "arrow"
+  | "arrow-lg"
   | "code-brackets"
   | "refresh"
   | "play"
@@ -46,6 +47,27 @@ export const Icon = (props: IconProps) => {
           />
         </svg>
       );
+    case "arrow-lg":
+      return (
+        <svg
+          width="61"
+          height="32"
+          viewBox="0 0 61 32"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={props.className}
+        >
+          <path
+            d="M45 31L60 16L45 0.999999"
+            stroke="currentColor"
+            stroke-linecap="round"
+          />
+          <path
+            d="M15 15.5C14.7239 15.5 14.5 15.7239 14.5 16C14.5 16.2761 14.7239 16.5 15 16.5L15 15.5ZM60 15.5L15 15.5L15 16.5L60 16.5L60 15.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      );
     case "chevron-down":
       return (
         <svg

src/components/SearchProvider/index.tsx

@@ -108,11 +108,9 @@ const SearchProvider = ({
       );
   }, [searchTerm, currentLocale]);
 
-  const handleSearchTermChange = (event: Event) => {
-    const target = event.target as HTMLInputElement;
-    const { value } = target;
-    if (value) {
-      setSearchTerm(target.value);
+  const handleSearchTermChange = (term?: string) => {
+    if (term !== undefined) {
+      setSearchTerm(term);
     }
   };
 
@@ -123,6 +121,7 @@ const SearchProvider = ({
       currentLocale={currentLocale as string}
       onSearchChange={handleSearchTermChange}
       uiTranslations={uiTranslations}
+      key={searchTerm}
     />
   );
 };

src/components/SearchResults/index.tsx

@@ -13,7 +13,7 @@ type SearchResultProps = {
   results: SearchResult[];
   searchTerm: string;
   currentLocale: string;
-  onSearchChange: JSX.GenericEventHandler<HTMLInputElement>;
+  onSearchChange: (term?: string) => void;
   uiTranslations: Record<string, string>;
 };
 
@@ -25,6 +25,7 @@ const SearchResults = ({
 }: SearchResultProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [currentFilter, setCurrentFilter] = useState("");
+  const [isInputEdited, setInputEdited] = useState(false);
 
   const allUniqueCategoriesForResults = useMemo(() => {
     const categories = results.map((result) => result.category);
@@ -97,6 +98,11 @@ const SearchResults = ({
       inputRef.current.value = "";
     }
   };
+  const submitInput = () => {
+    if (inputRef.current) {
+      onSearchChange(inputRef.current.value);
+    }
+  };
 
   const renderBigSearchForm = () => {
     return (
@@ -111,22 +117,33 @@ const SearchResults = ({
           value={searchTerm}
           placeholder={uiTranslations["Search"]}
           onKeyDown={(e) => {
+            setInputEdited(true);
             if (e.key === "Enter") {
               e.preventDefault();
-              onSearchChange(e);
+              submitInput();
             }
           }}
           class="h-fit w-full appearance-none bg-transparent px-md text-4xl placeholder-sidebar-type-color focus:outline-0"
           aria-label="Search through site content"
           required
         />
-        <button
-          type="reset"
-          class="absolute right-0 top-0 px-[22px] py-[13px]"
-          onClick={clearInput}
-        >
-          <Icon kind="close-lg" />
-        </button>
+        {isInputEdited ? (
+          <button
+            type="submit"
+            class="absolute right-0 top-[2px] px-[22px] py-[13px]"
+            onClick={submitInput}
+          >
+            <Icon kind="arrow-lg" />
+          </button>
+        ) : (
+          <button
+            type="reset"
+            class="absolute right-0 top-0 px-[22px] py-[13px]"
+            onClick={clearInput}
+          >
+            <Icon kind="close-lg" />
+          </button>
+        )}
       </search>
     );
   };