added canClear

packages/frontend/src/components/ui/input.tsx

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import { useRef } from "react";
 import Icon from "@/components/ui/icon";
 import { cn } from "@/lib/utils";
 
@@ -16,6 +17,9 @@ function Input({
 }) {
   const maxLength = typeof props.maxLength === "number" ? props.maxLength : undefined;
   const currentLength = typeof props.value === "string" ? props.value.length : undefined;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const isSearch = type === "search";
+  const canClear = isSearch && typeof props.value === "string" && props.value.length > 0;
 
   return (
     <div
@@ -34,18 +38,40 @@ function Input({
         </span>
       )}
       <input
+        ref={inputRef}
         type={type}
         data-slot="input"
         className={cn(
           "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
           "h-full flex-1 min-w-0 bg-transparent px-3 py-1 pr-1 text-base outline-none",
           "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          "appearance-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden",
           "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           showHashPrefix ? "pl-2 py-0" : "pl-3",
           inputClassName,
         )}
         {...props}
       />
+      {canClear && (
+        <button
+          type="button"
+          className="cursor-pointer px-2 h-full flex w-fit items-center justify-center text-muted-foreground hover:text-foreground"
+          aria-label="Clear search"
+          onClick={() => {
+            if (inputRef.current) {
+              const nativeInputValue = Object.getOwnPropertyDescriptor(
+                window.HTMLInputElement.prototype,
+                "value",
+              );
+              nativeInputValue?.set?.call(inputRef.current, "");
+              inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+              inputRef.current.focus();
+            }
+          }}
+        >
+          <Icon icon="x" className="size-4" />
+        </button>
+      )}
       {showCounter && currentLength !== undefined && maxLength !== undefined && (
         <span
           className={cn(