fix: clear input value on clearFiles from imperative handle

src/components/forms/FileInput/FileInput.stories.tsx

@@ -115,10 +115,14 @@ export const Disabled = (): JSX.Element => (
 
 export const WithRefAndCustomHandlers = {
   render: (argTypes: StorybookArguments): JSX.Element => {
-    const [files, setFiles] = useState<FileList | null>(null)
+    const INITIAL_FILES = null
+    const [files, setFiles] = useState<FileList | null>(INITIAL_FILES)
     const fileInputRef = useRef<FileInputRef>(null)
 
-    const handleClearFiles = (): void => fileInputRef.current?.clearFiles()
+    const handleClearFiles = (): void => {
+      fileInputRef.current?.clearFiles()
+      setFiles(INITIAL_FILES)
+    }
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
       argTypes.onChange(e)

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)
     })
   })

src/components/forms/FileInput/FileInput.tsx

@@ -70,7 +70,12 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     ref,
     () => ({
       input: internalRef.current,
-      clearFiles: (): void => setFiles([]),
+      clearFiles: (): void => {
+        setFiles([])
+        if (internalRef.current) {
+          internalRef.current.value = ''
+        }
+      },
       files,
     }),
     [files]