Merge pull request #10529 from marmelab/arrayinput-disabled

Update ArrayInput to throw an error when using outdated disabled prop

Author: djhi

docs/ArrayInput.md

@@ -84,7 +84,7 @@ Check [the `<SimpleFormIterator>` documentation](./SimpleFormIterator.md) for de
 
 ## Props
 
-`<ArrayInput>` accepts the [common input props](./Inputs.md#common-input-props) (except `format` and `parse`).
+`<ArrayInput>` accepts the [common input props](./Inputs.md#common-input-props) (except `disabled`, `readOnly`, `format` and `parse`).
 
 ## Global validation
 
@@ -109,3 +109,27 @@ You need to return an errors object shaped like this:
 ```
 
 **Tip:** You can find a sample `validate` function that handles arrays in the [Form Validation documentation](./Validation.md#global-validation).
+
+## Disabling The Input
+
+`<ArrayInput>` does not support the `disabled` and `readOnly` props.
+
+If you need to disable the input, set the `<SimpleFormIterator disabled>` prop, and make the child inputs `readOnly`:
+
+```jsx
+const OrderEdit = () => (
+    <Edit>
+        <SimpleForm>
+            <TextInput source="customer" />
+            <DateInput source="date" />
+            <ArrayInput source="items">
+                <SimpleFormIterator inline disabled>
+                    <TextInput source="name" readOnly/>
+                    <NumberInput source="price" readOnly />
+                    <NumberInput source="quantity" readOnly />
+                </SimpleFormIterator>
+            </ArrayInput>
+        </SimpleForm>
+    </Edit>
+);
+```

packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx

@@ -117,11 +117,11 @@ export const Disabled = () => (
                         >
                             <SimpleForm>
                                 <TextInput source="title" />
-                                <ArrayInput source="authors" disabled>
-                                    <SimpleFormIterator>
-                                        <TextInput source="name" />
-                                        <TextInput source="role" />
-                                        <TextInput source="surname" />
+                                <ArrayInput source="authors">
+                                    <SimpleFormIterator disabled>
+                                        <TextInput source="name" disabled />
+                                        <TextInput source="role" disabled />
+                                        <TextInput source="surname" disabled />
                                     </SimpleFormIterator>
                                 </ArrayInput>
                             </SimpleForm>
@@ -150,11 +150,11 @@ export const ReadOnly = () => (
                         >
                             <SimpleForm>
                                 <TextInput source="title" />
-                                <ArrayInput source="authors" readOnly>
-                                    <SimpleFormIterator>
-                                        <TextInput source="name" />
-                                        <TextInput source="role" />
-                                        <TextInput source="surname" />
+                                <ArrayInput source="authors">
+                                    <SimpleFormIterator disabled>
+                                        <TextInput source="name" readOnly />
+                                        <TextInput source="role" readOnly />
+                                        <TextInput source="surname" readOnly />
                                     </SimpleFormIterator>
                                 </ArrayInput>
                             </SimpleForm>

packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.tsx

@@ -85,8 +85,6 @@ export const ArrayInput = (props: ArrayInputProps) => {
         source: arraySource,
         validate,
         variant,
-        disabled,
-        readOnly,
         margin = 'dense',
         ...rest
     } = props;
@@ -246,11 +244,13 @@ export const getArrayInputError = error => {
 };
 
 export interface ArrayInputProps
-    extends CommonInputProps,
-        Omit<FormControlProps, 'defaultValue' | 'onBlur' | 'onChange'> {
+    extends Omit<CommonInputProps, 'disabled' | 'readOnly'>,
+        Omit<
+            FormControlProps,
+            'defaultValue' | 'disabled' | 'readOnly' | 'onBlur' | 'onChange'
+        > {
     className?: string;
     children: ReactElement;
-    disabled?: boolean;
     isFetching?: boolean;
     isLoading?: boolean;
     isPending?: boolean;