Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 04:55:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed search query updating on clear

Browse Source
This commit is contained in:
RyloRiz 2024-01-27 15:34:33 -08:00
parent 6a9e135de2
commit ef9792827a
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/form/SearchBar.tsx
View File

@ -1,5 +1,5 @@
import c from "classnames"; import c from "classnames";
import { forwardRef, useState } from "react"; import { forwardRef, useRef, useState } from "react";
import { Flare } from "@/components/utils/Flare"; import { Flare } from "@/components/utils/Flare";
@ -16,9 +16,20 @@ export interface SearchBarProps {
export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>( export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
(props, ref) => { (props, ref) => {
const [focused, setFocused] = useState(false); const [focused, setFocused] = useState(false);
const clearButtonRef = useRef<HTMLDivElement>(null);
function setSearch(value: string) { function setSearch(value: string) {
props.onChange(value, false); props.onChange(value, false);
clearButtonRef.current!.hidden = value.length >= 0;
}
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);
}
} }
return ( return (
@ -59,8 +70,10 @@ export const SearchBarInput = forwardRef<HTMLInputElement, SearchBarProps>(
/> />
<div <div
ref={clearButtonRef}
onClick={() => { onClick={() => {
setSearch(""); setSearch("");
setTimeout(() => refocusSearch(), 100);
}} }}
className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon" className="cursor-pointer absolute bottom-0 right-5 top-0 flex max-h-14 items-center text-search-icon"
> >