Merge pull request marmelab#10402 from marmelab/fix-FileInput-onChange

Fix `<FileInput>` triggers `onChange` twice with latest version of `react-dropzone`

Author: djhi

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

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;