From e537ff4c144718bf8660df2b43e8a146d692a67e Mon Sep 17 00:00:00 2001 From: steven7926 Date: Fri, 3 Jan 2025 17:56:47 -0500 Subject: [PATCH 1/2] clear input value on clearFiles from imperative handle --- src/components/forms/FileInput/FileInput.stories.tsx | 5 ++++- src/components/forms/FileInput/FileInput.tsx | 7 ++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/forms/FileInput/FileInput.stories.tsx b/src/components/forms/FileInput/FileInput.stories.tsx index 983fabbefb..8033450be4 100644 --- a/src/components/forms/FileInput/FileInput.stories.tsx +++ b/src/components/forms/FileInput/FileInput.stories.tsx @@ -118,7 +118,10 @@ export const WithRefAndCustomHandlers = { const [files, setFiles] = useState(null) const fileInputRef = useRef(null) - const handleClearFiles = (): void => fileInputRef.current?.clearFiles() + const handleClearFiles = (): void => { + fileInputRef.current?.clearFiles() + setFiles(null) + } const handleChange = (e: React.ChangeEvent): void => { argTypes.onChange(e) diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx index 589740f07c..4e2bb57d07 100644 --- a/src/components/forms/FileInput/FileInput.tsx +++ b/src/components/forms/FileInput/FileInput.tsx @@ -69,7 +69,12 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction< ref, () => ({ input: internalRef.current, - clearFiles: (): void => setFiles([]), + clearFiles: (): void => { + setFiles([]) + if (internalRef.current) { + internalRef.current.value = '' + } + }, files, }), [files] From 25e162f5437455f1f2a7cfab540e82aeabbf4b23 Mon Sep 17 00:00:00 2001 From: steven7926 Date: Sat, 4 Jan 2025 22:12:18 -0500 Subject: [PATCH 2/2] fix test --- src/components/forms/FileInput/FileInput.test.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/forms/FileInput/FileInput.test.tsx b/src/components/forms/FileInput/FileInput.test.tsx index 307f678f9a..b2e802ee72 100644 --- a/src/components/forms/FileInput/FileInput.test.tsx +++ b/src/components/forms/FileInput/FileInput.test.tsx @@ -408,9 +408,10 @@ describe('FileInput component', () => { 'display-none' ) - // Notice how input.files still exist because we can't programmatically set the value - expect(fileInputRef.current?.input?.files).toHaveLength(1) - // But the files state of the React "input" is cleared out + // Inputs files should be cleared out and reset + expect(fileInputRef.current?.input?.files).toHaveLength(0) + expect(fileInputRef.current?.input?.value).toEqual('') + // Files state of the React "input" is cleared out expect(fileInputRef.current?.files).toHaveLength(0) }) })