Reviewed changes & simplified clearing process

src/components/form/SearchBar.tsx

@@ -1,5 +1,5 @@
 import c from "classnames";
-import { forwardRef, useEffect, useRef, useState } from "react";
+import { forwardRef, useState } from "react";
 
 import { Flare } from "@/components/utils/Flare";
 
@@ -9,38 +9,18 @@ import { TextInputControl } from "../text-inputs/TextInputControl";
 export interface SearchBarProps {
   placeholder?: string;
   onChange: (value: string, force: boolean) => void;
-  onUnFocus: () => void;
+  onUnFocus: (newSearch?: string) => void;
   value: string;
 }
 
 export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
   (props, ref) => {
-    const [canClear, setCanClear] = useState(false);
     const [focused, setFocused] = useState(false);
-    const clearButtonRef = useRef<HTMLDivElement>(null);
 
     function setSearch(value: string) {
       props.onChange(value, false);
-      setCanClear(value.length > 0);
-      clearButtonRef.current!.style.opacity = canClear ? "1" : "0";
-      clearButtonRef.current!.style.cursor = canClear ? "pointer" : "auto";
     }
 
-    function refocusSearch() {
-      if (ref && typeof ref !== "function") {
-        ref.current?.blur();
-        setTimeout(() => ref.current?.focus(), 10);
-        setTimeout(() => ref.current?.blur(), 20);
-        setTimeout(() => ref.current?.focus(), 30);
-      }
-    }
-
-    useEffect(() => {
-      if (ref && typeof ref !== "function") {
-        setSearch(ref.current?.value || "");
-      }
-    });
-
     return (
       <Flare.Base
         className={c({
@@ -78,21 +58,22 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
             placeholder={props.placeholder}
           />
 
-          <div
-            ref={clearButtonRef}
-            onClick={() => {
-              if (canClear) {
-                setSearch("");
-                setTimeout(() => refocusSearch(), 10);
-              }
-            }}
-            className="group/clear cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full opacity-0 transition duration-100"
-          >
-            <Icon
-              icon={Icons.X}
-              className="group-hover/clear:text-white transition duration-100"
-            />
-          </div>
+          {props.value.length > 0 && (
+            <div
+              onClick={() => {
+                props.onUnFocus("");
+                if (ref && typeof ref !== "function") {
+                  ref.current?.focus();
+                }
+              }}
+              className="cursor-pointer absolute p-1 bottom-0 right-2 top-0 flex justify-center my-auto max-h-10 max-w-10 h-full w-full items-center hover:bg-search-hoverBackground active:scale-110 text-search-icon rounded-full transition duration-100"
+            >
+              <Icon
+                icon={Icons.X}
+                className="hover:text-white transition duration-100"
+              />
+            </div>
+          )}
         </Flare.Child>
       </Flare.Base>
     );

src/hooks/useSearchQuery.ts

@@ -33,8 +33,10 @@ export function useSearchQuery(): [
     );
   };
 
-  const onUnFocus = () => {
-    updateParams(search, true);
+  const onUnFocus = (newSearch?: string) => {
+    // eslint-disable-next-line eqeqeq
+    const updated = newSearch == undefined ? search : newSearch;
+    updateParams(updated, true);
   };
 
   return [search, updateParams, onUnFocus];

themes/list/blue.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100

themes/list/gray.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100

themes/list/red.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100

themes/list/teal.ts

@@ -111,6 +111,7 @@ export default createTheme({
 
       search: {
         background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
         focused: tokens.shade.c400,
         placeholder: tokens.shade.c100,
         icon: tokens.shade.c100