From fbf8a861d5896aa5f95110337002255b6a034e6c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Kaiser <jb@marmelab.com>
Date: Mon, 9 Dec 2024 10:27:42 +0100
Subject: [PATCH] Fix FileInput triggers onChange twice with latest
 react-dropzone

---
 .../src/input/FileInput.stories.tsx            | 18 ++++++++++++++++++
 .../ra-ui-materialui/src/input/FileInput.tsx   |  2 ++
 2 files changed, 20 insertions(+)

diff --git a/packages/ra-ui-materialui/src/input/FileInput.stories.tsx b/packages/ra-ui-materialui/src/input/FileInput.stories.tsx
index ba33618b51a..1cb6c68a8de 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.stories.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.stories.tsx
@@ -114,6 +114,24 @@ export const CustomRemoveIcon = () => (
     </Wrapper>
 );
 
+export const OnChange = ({ onChange = console.log }) => (
+    <Wrapper>
+        <FileInput source="attachment" onChange={onChange}>
+            <FileField source="src" title="title" />
+        </FileInput>
+        <FormInspector name="attachment" />
+    </Wrapper>
+);
+
+export const OnChangeMultiple = ({ onChange = console.log }) => (
+    <Wrapper>
+        <FileInput source="attachment" onChange={onChange} multiple>
+            <FileField source="src" title="title" />
+        </FileInput>
+        <FormInspector name="attachment" />
+    </Wrapper>
+);
+
 const i18nProvider = polyglotI18nProvider(() => englishMessages);
 
 const Wrapper = ({ children }) => (
diff --git a/packages/ra-ui-materialui/src/input/FileInput.tsx b/packages/ra-ui-materialui/src/input/FileInput.tsx
index 74d41265f73..aa7580bcd21 100644
--- a/packages/ra-ui-materialui/src/input/FileInput.tsx
+++ b/packages/ra-ui-materialui/src/input/FileInput.tsx
@@ -40,6 +40,7 @@ export const FileInput = (props: FileInputProps) => {
         labelMultiple = 'ra.input.file.upload_several',
         labelSingle = 'ra.input.file.upload_single',
         options = {},
+        onChange: onChangeProp,
         onRemove: onRemoveProp,
         parse,
         placeholder,
@@ -95,6 +96,7 @@ export const FileInput = (props: FileInputProps) => {
         validate,
         disabled,
         readOnly,
+        onChange: onChangeProp,
         ...rest,
     });
     const { error, invalid } = fieldState;