diff --git a/src/components/form/SearchBar.tsx b/src/components/form/SearchBar.tsx index f09684fd..8a7cfc4a 100644 --- a/src/components/form/SearchBar.tsx +++ b/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( (props, ref) => { - const [canClear, setCanClear] = useState(false); const [focused, setFocused] = useState(false); - const clearButtonRef = useRef(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 ( ( placeholder={props.placeholder} /> -
{ - 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" - > - -
+ {props.value.length > 0 && ( +
{ + 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" + > + +
+ )}
); diff --git a/src/hooks/useSearchQuery.ts b/src/hooks/useSearchQuery.ts index 75cd2a28..23942c06 100644 --- a/src/hooks/useSearchQuery.ts +++ b/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]; diff --git a/themes/list/blue.ts b/themes/list/blue.ts index e10592dc..2cb43766 100644 --- a/themes/list/blue.ts +++ b/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 diff --git a/themes/list/gray.ts b/themes/list/gray.ts index c0c434e8..c6c0144d 100644 --- a/themes/list/gray.ts +++ b/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 diff --git a/themes/list/red.ts b/themes/list/red.ts index b42b935f..0ec319e8 100644 --- a/themes/list/red.ts +++ b/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 diff --git a/themes/list/teal.ts b/themes/list/teal.ts index 742f4a32..1fb66ac4 100644 --- a/themes/list/teal.ts +++ b/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