Fix support for readOnly on all RA Inputs

Makefile

@@ -120,7 +120,7 @@ build-create-react-admin:
 	@echo "Transpiling create-react-admin files...";
 	@cd ./packages/create-react-admin && yarn build
 
-build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-localforage build-ra-data-localstorage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-ra-i18n-i18next build-react-admin build-ra-no-code build-create-react-admin  ## compile ES6 files to JS
+build: build-ra-core build-ra-data-fakerest build-ra-ui-materialui build-ra-data-json-server build-ra-data-localforage build-ra-data-localstorage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-ra-i18n-i18next build-react-admin build-ra-no-code build-create-react-admin  ## compile ES6 files to JS
 
 doc: ## compile doc as html and launch doc web server
 	@yarn doc

docs/Inputs.md

@@ -43,7 +43,8 @@ All input components accept the following props:
 | `source`        | Required | `string`                  | -       | Name of the entity property to use for the input value                                                                                                              |
 | `className`     | Optional | `string`                  | -       | Class name (usually generated by JSS) to customize the look and feel of the field element itself                                                                    |
 | `defaultValue`  | Optional | `any`                     | -       | Default value of the input.                                                                                                                                         |
-| `disabled`      | Optional | `boolean`                 | -       | If true, the input is disabled.                                                                                                                                     |
+| `readOnly`      | Optional | `boolean`                 | `false`       | If true, the input is in read-only mode.                                                                                                                                     |
+| `disabled`      | Optional | `boolean`                 | `false`       | If true, the input is disabled.                                                                                                                                     |
 | `format`        | Optional | `Function`                | `value => value == null ? '' : value` | Callback taking the value from the form state, and returning the input value.                                                                                       |
 | `fullWidth`     | Optional | `boolean`                 | `false` | If `true`, the input will expand to fill the form width                                                                                                             |
 | `helperText`    | Optional | `string`                  | -       | Text to be displayed under the input (cannot be used inside a filter)                                                                                                          |
@@ -150,21 +151,29 @@ export const PostCreate = () => (
 );
 ```
 
+## `readOnly`
+
+The `readOnly` prop set to true makes the element not mutable, meaning the user can not edit the control.
+
+```tsx
+<TextInput source="title" readOnly />
+```
+
+Contrary to disabled controls, read-only controls are still focusable and are submitted with the form.
+
 ## `disabled`
 
-If `true`, the input is disabled and the user can't change the value.
+The `disabled` prop set to true makes the element not mutable, focusable, or even submitted with the form.
 
 ```tsx
 <TextInput source="title" disabled />
 ```
 
-**Tip**: The form framework used by react-admin, react-hook-form, [considers](https://github.com/react-hook-form/react-hook-form/pull/10805) that a `disabled` input shouldn't submit any value. So react-hook-form sets the value of all `disabled` inputs to `undefined`. As a consequence, a form with a `disabled` input is always considered `dirty` (i.e. react-hook-form considers that the form values and the initial record values are different), and it triggers [the `warnWhenUnsavedChanges` feature](./EditTutorial.md#warning-about-unsaved-changes) when leaving the form, even though the user changed nothing. The workaround is to set the `disabled` prop on the underlying input component, as follows:
+Contrary to read-only controls, disabled controls can not receive focus and are not submitted with the form.
 
-{% raw %}
-```jsx
-<TextInput source="title" InputProps={{ disabled: true }} />
-```
-{% endraw %}
+**Warning:** Note that `disabled` inputs are **not** included in the form values, and hence may trigger `warnWhenUnsavedChanges` if the input previously had a value in the record.
+
+**Tip:** To include the input in the form values, you can use `readOnly` instead of `disabled`.
 
 ## `format`
 

docs/SimpleFormIterator.md

@@ -86,6 +86,8 @@ const OrderEdit = () => (
 | `inline` | Optional | `boolean` | `false` | When true, inputs are put on the same line |
 | `removeButton` | Optional | `ReactElement` | - | Component to render for the remove button |
 | `reOrderButtons` | Optional | `ReactElement` | - | Component to render for the up / down button |
+| `readOnly` | Optional | `boolean` | `false` | If true, all inputs are in read-only mode. |
+| `disabled` | Optional | `boolean` | `false` | If true, all inputs are disabled. |
 | `sx` | Optional | `SxProps` | - | Material UI shortcut for defining custom styles |
 
 ## `addButton`
@@ -354,6 +356,34 @@ const OrderEdit = () => (
 );
 ```
 
+## `readOnly`
+
+The `readOnly` prop set to true makes the children input not mutable, meaning the user can not edit them.
+
+```jsx
+<SimpleFormIterator readOnly>
+    <TextInput source="name" />
+    <NumberInput source="price" />
+    <NumberInput source="quantity" />
+</SimpleFormIterator>
+```
+
+Contrary to disabled controls, read-only controls are still focusable and are submitted with the form.
+
+## `disabled`
+
+The `disabled` prop set to true makes the children input not mutable, focusable, or even submitted with the form.
+
+```jsx
+<SimpleFormIterator disabled>
+    <TextInput source="name" />
+    <NumberInput source="price" />
+    <NumberInput source="quantity" />
+</SimpleFormIterator>
+```
+
+Contrary to read-only controls, disabled controls can not receive focus and are not submitted with the form.
+
 ## `sx`
 
 You can override the style of the root element (a `<div>` element) as well as those of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples).

docs/TranslatableInputs.md

@@ -197,4 +197,4 @@ You can add validators to any of the inputs inside a `TranslatableInputs`. If an
     <TextInput source="name" validate={[required()]} />
     <RichTextInput source="description" validate={[maxLength(100)]} />
 </TranslatableInputs>
-```
+```

packages/ra-core/src/form/useInput.ts

@@ -148,6 +148,8 @@ export type InputProps<ValueType = any> = Omit<
         resource?: string;
         source: string;
         validate?: Validator | Validator[];
+        readOnly?: boolean;
+        disabled?: boolean;
     };
 
 export type UseInputValue = {

packages/ra-input-rich-text/src/RichTextInput.stories.tsx

@@ -79,6 +79,19 @@ export const Disabled = (props: Partial<SimpleFormProps>) => (
     </AdminContext>
 );
 
+export const ReadOnly = (props: Partial<SimpleFormProps>) => (
+    <AdminContext i18nProvider={i18nProvider}>
+        <SimpleForm
+            defaultValues={{ body: 'Hello World' }}
+            onSubmit={() => {}}
+            {...props}
+        >
+            <RichTextInput source="body" readOnly />
+            <FormInspector />
+        </SimpleForm>
+    </AdminContext>
+);
+
 export const Small = (props: Partial<SimpleFormProps>) => (
     <AdminContext i18nProvider={i18nProvider}>
         <SimpleForm

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

@@ -91,6 +91,38 @@ export const Disabled = () => (
                                 <SimpleFormIterator>
                                     <TextInput source="name" />
                                     <TextInput source="role" />
+                                    <TextInput source="surname" />
+                                </SimpleFormIterator>
+                            </ArrayInput>
+                        </SimpleForm>
+                    </Edit>
+                );
+            }}
+        />
+    </Admin>
+);
+
+export const ReadOnly = () => (
+    <Admin dataProvider={dataProvider} history={history}>
+        <Resource
+            name="books"
+            edit={() => {
+                return (
+                    <Edit
+                        mutationMode="pessimistic"
+                        mutationOptions={{
+                            onSuccess: data => {
+                                console.log(data);
+                            },
+                        }}
+                    >
+                        <SimpleForm>
+                            <TextInput source="title" />
+                            <ArrayInput source="authors" readOnly>
+                                <SimpleFormIterator>
+                                    <TextInput source="name" />
+                                    <TextInput source="role" />
+                                    <TextInput source="surname" />
                                 </SimpleFormIterator>
                             </ArrayInput>
                         </SimpleForm>
@@ -408,8 +440,8 @@ const BookEditGlobalValidation = () => {
             }}
         >
             <SimpleForm validate={globalValidator}>
-                {/* 
-                  We still need `validate={required()}` to indicate fields are required 
+                {/*
+                  We still need `validate={required()}` to indicate fields are required
                   with a '*' symbol after the label, but the real validation happens in `globalValidator`
                 */}
                 <ArrayInput source="authors" fullWidth validate={required()}>
@@ -438,8 +470,8 @@ const CreateGlobalValidationInFormTab = () => {
             }}
         >
             <TabbedForm validate={globalValidator}>
-                {/* 
-                  We still need `validate={required()}` to indicate fields are required 
+                {/*
+                  We still need `validate={required()}` to indicate fields are required
                   with a '*' symbol after the label, but the real validation happens in `globalValidator`
                 */}
                 <TabbedForm.Tab label="Main">

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

@@ -83,6 +83,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
         validate,
         variant,
         disabled,
+        readOnly,
         margin = 'dense',
         ...rest
     } = props;
@@ -185,7 +186,8 @@ export const ArrayInput = (props: ArrayInputProps) => {
                     source,
                     variant,
                     margin,
-                    disabled,
+                    disabled: children.props.disabled || disabled,
+                    readOnly: children.props.readOnly || readOnly,
                 })}
             </ArrayInputContext.Provider>
             {renderHelperText ? (

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

@@ -147,7 +147,23 @@ describe('<SimpleFormIterator />', () => {
         render(
             <Wrapper>
                 <SimpleForm>
-                    <ArrayInput source="emails" disabled>
+                    <ArrayInput source="emails" disabled readOnly={false}>
+                        <SimpleFormIterator>
+                            <TextInput source="email" />
+                        </SimpleFormIterator>
+                    </ArrayInput>
+                </SimpleForm>
+            </Wrapper>
+        );
+
+        expect(screen.queryAllByLabelText('ra.action.add').length).toBe(0);
+    });
+
+    it('should not display add button if readOnly is truthy', () => {
+        render(
+            <Wrapper>
+                <SimpleForm>
+                    <ArrayInput source="emails" readOnly>
                         <SimpleFormIterator>
                             <TextInput source="email" />
                         </SimpleFormIterator>

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

@@ -108,6 +108,38 @@ export const Inline = () => (
     </AdminContext>
 );
 
+export const ReadOnly = () => (
+    <AdminContext dataProvider={dataProvider}>
+        <Edit resource="books" id="1">
+            <SimpleForm>
+                <ArrayInput source="authors">
+                    <SimpleFormIterator readOnly>
+                        <TextInput source="name" />
+                        <TextInput source="role" />
+                        <TextInput source="surname" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </Edit>
+    </AdminContext>
+);
+
+export const Disabled = () => (
+    <AdminContext dataProvider={dataProvider}>
+        <Edit resource="books" id="1">
+            <SimpleForm>
+                <ArrayInput source="authors">
+                    <SimpleFormIterator disabled>
+                        <TextInput source="name" />
+                        <TextInput source="role" />
+                        <TextInput source="surname" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </Edit>
+    </AdminContext>
+);
+
 export const DisableAdd = () => (
     <AdminContext dataProvider={dataProvider}>
         <Edit resource="books" id="1">