Merge pull request #5876 from marmelab/fix-array-input-children-disabled

Fix ArrayInput Always Override Inputs disabled Prop
marmelab · Feb 5, 2021 · 222793e · 222793e
2 parents 59adbc1 + 0a4c642
commit 222793e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx b/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx
@@ -94,6 +94,37 @@ describe('<SimpleFormIterator />', () => {
         expect((inputElements[1] as HTMLInputElement).value).toBe('bar');
     });
 
+    it('should allow to override the disabled prop of each inputs', () => {
+        const { queryAllByLabelText } = renderWithRedux(
+            <ThemeProvider theme={theme}>
+                <SaveContextProvider value={saveContextValue}>
+                    <SideEffectContextProvider value={sideEffectValue}>
+                        <SimpleForm
+                            record={{
+                                id: 'whatever',
+                                emails: [{ email: 'foo' }, { email: 'bar' }],
+                            }}
+                        >
+                            <ArrayInput source="emails">
+                                <SimpleFormIterator>
+                                    <TextInput source="email" disabled />
+                                </SimpleFormIterator>
+                            </ArrayInput>
+                        </SimpleForm>
+                    </SideEffectContextProvider>
+                </SaveContextProvider>
+            </ThemeProvider>
+        );
+        const inputElements = queryAllByLabelText(
+            'resources.undefined.fields.email'
+        );
+        expect(inputElements).toHaveLength(2);
+        expect((inputElements[0] as HTMLInputElement).disabled).toBeTruthy();
+        expect((inputElements[0] as HTMLInputElement).value).toBe('foo');
+        expect((inputElements[1] as HTMLInputElement).disabled).toBeTruthy();
+        expect((inputElements[1] as HTMLInputElement).value).toBe('bar');
+    });
+
     it('should display an add item button at least', () => {
         const { getByText } = renderWithRedux(
             <SaveContextProvider value={saveContextValue}>

diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx b/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx
@@ -201,29 +201,37 @@ const SimpleFormIterator: FC<SimpleFormIteratorProps> = props => {
                             <section className={classes.form}>
                                 {Children.map(
                                     children,
-                                    (input: ReactElement, index2) =>
-                                        isValidElement<any>(input) ? (
+                                    (input: ReactElement, index2) => {
+                                        if (!isValidElement<any>(input)) {
+                                            return null;
+                                        }
+                                        const {
+                                            source,
+                                            ...inputProps
+                                        } = input.props;
+                                        return (
                                             <FormInput
                                                 basePath={
                                                     input.props.basePath ||
                                                     basePath
                                                 }
                                                 input={cloneElement(input, {
-                                                    source: input.props.source
-                                                        ? `${member}.${input.props.source}`
+                                                    source: source
+                                                        ? `${member}.${source}`
                                                         : member,
-                                                    index: input.props.source
+                                                    index: source
                                                         ? undefined
                                                         : index2,
                                                     label:
                                                         typeof input.props
                                                             .label ===
                                                         'undefined'
-                                                            ? input.props.source
-                                                                ? `resources.${resource}.fields.${input.props.source}`
+                                                            ? source
+                                                                ? `resources.${resource}.fields.${source}`
                                                                 : undefined
                                                             : input.props.label,
                                                     disabled,
+                                                    ...inputProps,
                                                 })}
                                                 record={
                                                     (records &&
@@ -234,7 +242,8 @@ const SimpleFormIterator: FC<SimpleFormIteratorProps> = props => {
                                                 variant={variant}
                                                 margin={margin}
                                             />
-                                        ) : null
+                                        );
+                                    }
                                 )}
                             </section>
                             {!disabled &&