fix(input): missing clear button with file input type

heroui-inc · Jan 19, 2025 · 6345030 · 6345030
1 parent 103519c
commit 6345030
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/.changeset/calm-seas-lie.md b/.changeset/calm-seas-lie.md
@@ -0,0 +1,5 @@
+---
+"@heroui/input": patch
+---
+
+fix clear button with file input type (#4592)
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
@@ -140,21 +140,26 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     handleValueChange,
   );
 
+  const isFileTypeInput = type === "file";
+  const hasUploadedFiles = ((domRef?.current as HTMLInputElement)?.files?.length ?? 0) > 0;
   const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!);
-  const isFilled = !isEmpty(inputValue) || isFilledByDefault;
+  const isFilled = !isEmpty(inputValue) || isFilledByDefault || hasUploadedFiles;
   const isFilledWithin = isFilled || isFocusWithin;
   const isHiddenType = type === "hidden";
   const isMultiline = originalProps.isMultiline;
-  const isFileTypeInput = type === "file";
 
   const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
 
   const handleClear = useCallback(() => {
-    setInputValue("");
+    if (isFileTypeInput) {
+      (domRef.current as HTMLInputElement).value = "";
+    } else {
+      setInputValue("");
+    }
 
     onClear?.();
     domRef.current?.focus();
-  }, [setInputValue, onClear]);
+  }, [setInputValue, onClear, isFileTypeInput]);
 
   // if we use `react-hook-form`, it will set the input value using the ref in register
   // i.e. setting ref.current.value to something which is uncontrolled