From 2f7d1126a1bcc768ae6314f8a2f7e8e13ac6082b Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 24 Oct 2023 17:01:41 +0200
Subject: [PATCH 1/2] [Doc] Add gotcha about `<Input disabled>` usage and
 `isDirty` form state

Since `react-hook-form` v7.46.0, a `disabled` input makes the form dirty. This isn't going to change, so we may as well warn our users about it.
---
 docs/Features.md                             | 6 ++++--
 docs/Inputs.md                               | 8 ++++++++
 docs/Readme.md                               | 4 ++--
 docs/Tutorial.md                             | 4 +++-
 examples/simple/src/comments/CommentEdit.tsx | 6 +++++-
 examples/simple/src/posts/PostEdit.tsx       | 7 +++++--
 examples/simple/src/users/UserEdit.tsx       | 4 +++-
 7 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/docs/Features.md b/docs/Features.md
index 352fdbe7b1e..0451ef0ddff 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -426,6 +426,7 @@ React-admin offers a **rich set of input components and form layouts** to build
 
 For instance, here is how to build a tabbed form for editing a blog post:
 
+{% raw %}
 ```jsx
 import {
     TabbedForm,
@@ -445,7 +446,7 @@ export const PostEdit = () => (
     <Edit>
         <TabbedForm>
             <TabbedForm.Tab label="summary">
-                <TextInput disabled label="Id" source="id" />
+                <TextInput label="Id" source="id" inputProps={{ disabled: true }} />
                 <TextInput source="title" validate={required()} />
                 <TextInput multiline source="teaser" validate={required()} />
             </TabbedForm.Tab>
@@ -457,7 +458,7 @@ export const PostEdit = () => (
                 <DateInput label="Publication date" source="published_at" />
                 <NumberInput source="average_note" validate={[ number(), minValue(0) ]} />
                 <BooleanInput label="Allow comments?" source="commentable" defaultValue />
-                <TextInput disabled label="Nb views" source="views" />
+                <TextInput label="Nb views" source="views" inputProps={{ disabled: true }} />
             </TabbedForm.Tab>
             <TabbedForm.Tab label="comments">
                 <ReferenceManyField reference="comments" target="post_id" label={false}>
@@ -472,6 +473,7 @@ export const PostEdit = () => (
     </Edit>
 );
 ```
+{% endraw %}
 
 <video controls autoplay playsinline muted loop>
   <source src="./img/tabbed-form.webm" type="video/webm"/>
diff --git a/docs/Inputs.md b/docs/Inputs.md
index e88f30d118f..d0e30889220 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -158,6 +158,14 @@ If `true`, the input is disabled and the user can't change the value.
 <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:
+
+{% raw %}
+```jsx
+<TextInput source="title" InputProps={{ disabled: true }} />
+```
+{% endraw %}
+
 ## `format`
 
 The `format` prop accepts a callback taking the value from the form state, and returning the input value (which should be a string).
diff --git a/docs/Readme.md b/docs/Readme.md
index a91c601a8af..c22aa57acd2 100644
--- a/docs/Readme.md
+++ b/docs/Readme.md
@@ -82,13 +82,13 @@ const PostTitle = () => {
 export const PostEdit = () => (
     <Edit title={<PostTitle />}>
         <SimpleForm>
-            <TextInput disabled source="id" />
+            <TextInput source="id" inputProps={{ disabled: true }} />
             <TextInput source="title" />
             <TextInput source="teaser" options={{ multiline: true }} />
             <TextInput multiline source="body" />
             <DateInput label="Publication date" source="published_at" />
             <TextInput source="average_note" />
-            <TextInput disabled label="Nb views" source="views" />
+            <TextInput label="Nb views" source="views" inputProps={{ disabled: true }}/>
         </SimpleForm>
     </Edit>
 );
diff --git a/docs/Tutorial.md b/docs/Tutorial.md
index 2a2c925cb99..203050484ab 100644
--- a/docs/Tutorial.md
+++ b/docs/Tutorial.md
@@ -703,12 +703,13 @@ export const App = () => (
 
 You can now adjust the `<PostEdit>` component to disable the edition of the primary key (`id`), place it first, and use a textarea for the `body` field, as follows:
 
+{% raw %}
 ```diff
 // in src/posts.tsx
 export const PostEdit = () => (
   <Edit>
     <SimpleForm>
-+     <TextInput source="id" disabled />
++     <TextInput source="id" InputProps={{ disabled: true }} />
       <ReferenceInput source="userId" reference="users" link="show" />
 -     <TextInput source="id" />
       <TextInput source="title" />
@@ -718,6 +719,7 @@ export const PostEdit = () => (
   </Edit>
 );
 ```
+{% endraw %}
 
 If you've understood the `<List>` component, the `<Edit>` component will be no surprise. It's responsible for fetching the record, and displaying the page title. It passes the record down to the `<SimpleForm>` component, which is responsible for the form layout, default values, and validation. Just like `<Datagrid>`, `<SimpleForm>` uses its children to determine the form inputs to display. It expects *input components* as children. `<TextInput>` and `<ReferenceInput>` are such inputs.
 
diff --git a/examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.tsx
index 5c45ede1145..fa4413f195f 100644
--- a/examples/simple/src/comments/CommentEdit.tsx
+++ b/examples/simple/src/comments/CommentEdit.tsx
@@ -129,7 +129,11 @@ const CommentEdit = props => {
                             onSubmit={save}
                             warnWhenUnsavedChanges
                         >
-                            <TextInput disabled source="id" fullWidth />
+                            <TextInput
+                                source="id"
+                                fullWidth
+                                inputProps={{ disabled: true }}
+                            />
                             <ReferenceInput
                                 source="post_id"
                                 reference="posts"
diff --git a/examples/simple/src/posts/PostEdit.tsx b/examples/simple/src/posts/PostEdit.tsx
index 71cfaab73c7..68f742fc0dd 100644
--- a/examples/simple/src/posts/PostEdit.tsx
+++ b/examples/simple/src/posts/PostEdit.tsx
@@ -116,7 +116,10 @@ const PostEdit = () => {
                         justifyContent="space-between"
                         fullWidth
                     >
-                        <TextInput disabled source="id" />
+                        <TextInput
+                            InputProps={{ disabled: true }}
+                            source="id"
+                        />
                         <TextInput
                             source="title"
                             validate={required()}
@@ -224,7 +227,7 @@ const PostEdit = () => {
                         validate={[required(), number(), minValue(0)]}
                     />
                     <BooleanInput source="commentable" defaultValue />
-                    <TextInput disabled source="views" />
+                    <TextInput InputProps={{ disabled: true }} source="views" />
                     <ArrayInput source="pictures">
                         <SimpleFormIterator>
                             <TextInput source="url" defaultValue="" />
diff --git a/examples/simple/src/users/UserEdit.tsx b/examples/simple/src/users/UserEdit.tsx
index 019d2798d33..cef56769f1b 100644
--- a/examples/simple/src/users/UserEdit.tsx
+++ b/examples/simple/src/users/UserEdit.tsx
@@ -66,7 +66,9 @@ const UserEditForm = () => {
             onSubmit={newSave}
         >
             <TabbedForm.Tab label="user.form.summary" path="">
-                {permissions === 'admin' && <TextInput disabled source="id" />}
+                {permissions === 'admin' && (
+                    <TextInput source="id" inputProps={{ disabled: true }} />
+                )}
                 <TextInput
                     source="name"
                     defaultValue="slim shady"

From 63e49068680b40ba1a6b592ef91ff4ec6cc2ed18 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Tue, 24 Oct 2023 17:06:00 +0200
Subject: [PATCH 2/2] Fix lowercase InputProps

---
 docs/Features.md                             | 4 ++--
 docs/Readme.md                               | 4 ++--
 examples/simple/src/comments/CommentEdit.tsx | 2 +-
 examples/simple/src/users/UserEdit.tsx       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/Features.md b/docs/Features.md
index 0451ef0ddff..a6b5aa1810f 100644
--- a/docs/Features.md
+++ b/docs/Features.md
@@ -446,7 +446,7 @@ export const PostEdit = () => (
     <Edit>
         <TabbedForm>
             <TabbedForm.Tab label="summary">
-                <TextInput label="Id" source="id" inputProps={{ disabled: true }} />
+                <TextInput label="Id" source="id" InputProps={{ disabled: true }} />
                 <TextInput source="title" validate={required()} />
                 <TextInput multiline source="teaser" validate={required()} />
             </TabbedForm.Tab>
@@ -458,7 +458,7 @@ export const PostEdit = () => (
                 <DateInput label="Publication date" source="published_at" />
                 <NumberInput source="average_note" validate={[ number(), minValue(0) ]} />
                 <BooleanInput label="Allow comments?" source="commentable" defaultValue />
-                <TextInput label="Nb views" source="views" inputProps={{ disabled: true }} />
+                <TextInput label="Nb views" source="views" InputProps={{ disabled: true }} />
             </TabbedForm.Tab>
             <TabbedForm.Tab label="comments">
                 <ReferenceManyField reference="comments" target="post_id" label={false}>
diff --git a/docs/Readme.md b/docs/Readme.md
index c22aa57acd2..3b383792cd1 100644
--- a/docs/Readme.md
+++ b/docs/Readme.md
@@ -82,13 +82,13 @@ const PostTitle = () => {
 export const PostEdit = () => (
     <Edit title={<PostTitle />}>
         <SimpleForm>
-            <TextInput source="id" inputProps={{ disabled: true }} />
+            <TextInput source="id" InputProps={{ disabled: true }} />
             <TextInput source="title" />
             <TextInput source="teaser" options={{ multiline: true }} />
             <TextInput multiline source="body" />
             <DateInput label="Publication date" source="published_at" />
             <TextInput source="average_note" />
-            <TextInput label="Nb views" source="views" inputProps={{ disabled: true }}/>
+            <TextInput label="Nb views" source="views" InputProps={{ disabled: true }}/>
         </SimpleForm>
     </Edit>
 );
diff --git a/examples/simple/src/comments/CommentEdit.tsx b/examples/simple/src/comments/CommentEdit.tsx
index fa4413f195f..92a094ae064 100644
--- a/examples/simple/src/comments/CommentEdit.tsx
+++ b/examples/simple/src/comments/CommentEdit.tsx
@@ -132,7 +132,7 @@ const CommentEdit = props => {
                             <TextInput
                                 source="id"
                                 fullWidth
-                                inputProps={{ disabled: true }}
+                                InputProps={{ disabled: true }}
                             />
                             <ReferenceInput
                                 source="post_id"
diff --git a/examples/simple/src/users/UserEdit.tsx b/examples/simple/src/users/UserEdit.tsx
index cef56769f1b..39adb35b301 100644
--- a/examples/simple/src/users/UserEdit.tsx
+++ b/examples/simple/src/users/UserEdit.tsx
@@ -67,7 +67,7 @@ const UserEditForm = () => {
         >
             <TabbedForm.Tab label="user.form.summary" path="">
                 {permissions === 'admin' && (
-                    <TextInput source="id" inputProps={{ disabled: true }} />
+                    <TextInput source="id" InputProps={{ disabled: true }} />
                 )}
                 <TextInput
                     source="name"