From 634503055a5e2cd8803b992e915383ec619f157b Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sun, 19 Jan 2025 18:54:52 +0800 Subject: [PATCH] fix(input): missing clear button with file input type --- .changeset/calm-seas-lie.md | 5 +++++ packages/components/input/src/use-input.ts | 13 +++++++++---- 2 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 .changeset/calm-seas-lie.md diff --git a/.changeset/calm-seas-lie.md b/.changeset/calm-seas-lie.md new file mode 100644 index 0000000000..47f0564fd0 --- /dev/null +++ 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 index dd14ad7834..76e45d98c6 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -140,21 +140,26 @@ export function useInput 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