archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
աӄա 2025-02-06 04:51:45 +08:00 committed by GitHub
parent 6159f47d06
commit 8319308727
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/calm-seas-lie.md Normal file
View File

@ -0,0 +1,5 @@
---
"@heroui/input": patch
---
fix clear button with file input type (#4592)

11
packages/components/input/src/use-input.ts
View File

@ -146,21 +146,26 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
handleValueChange, 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 isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!);
const isFilled = !isEmpty(inputValue) || isFilledByDefault; const isFilled = !isEmpty(inputValue) || isFilledByDefault || hasUploadedFiles;
const isFilledWithin = isFilled || isFocusWithin; const isFilledWithin = isFilled || isFocusWithin;
const isHiddenType = type === "hidden"; const isHiddenType = type === "hidden";
const isMultiline = originalProps.isMultiline; const isMultiline = originalProps.isMultiline;
const isFileTypeInput = type === "file";
const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : ""); const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
const handleClear = useCallback(() => { const handleClear = useCallback(() => {
if (isFileTypeInput) {
(domRef.current as HTMLInputElement).value = "";
} else {
setInputValue(""); setInputValue("");
}
onClear?.(); onClear?.();
domRef.current?.focus(); 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 // 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 // i.e. setting ref.current.value to something which is uncontrolled