warnWhenUnsavedChanges does not function properly with disabled TextInput

[ostertag]

What you were expecting:
If you open the editing page for any resource and then leave that page without making any changes, you should not be prompted with an alert for unsaved changes.

What happened instead:
When you open the edit page for the Posts or Comments resource and then leave that page without making any modifications, an alert for unsaved changes IS shown.

Steps to reproduce:

• Click on any post (e.g. id 13),
• on the shown edit page do nothing,
• just click on Posts resource again, to see all posts,
• now alert "Some of your changes weren't saved. Are you sure you want to ignore them?" is shown even nothing was modified.

The Comments resource has the same issue. However, this problem doesn't impact tag editing.

Related code:
Standard sample application on stackblitz.com is enough to reproduce the bug:

 https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple

Other information:
It appears that this bug is associated with the disabled attribute of the TextInput component. After removing the disabled attribute on lines 119 and 227 in the src/posts/PostEdit.tsx file, no unnecessary alerts are displayed.

When the disabled attribute is present, the alert is triggered even if no modifications to the record have been made. You can confirm that no modifications have been made by observing the disabled state of the SAVE button.

The Tags resource is functioning correctly, probably because there are no disabled text inputs.

Environment

• React-admin version: 4.15.1
• React version: 17.0.2 (and 18.2.0 too)
• Browser: Edge, Chrome

[erwanMarmelab]

Thanks for the report, we will flag it as a bug

[slax57]

Probably same root cause as issue #9365, i.e. react-hook-form/react-hook-form#11055.

To be confirmed, but if that is the case, then there's nothing we can do (apart from fixing the demo).

[slax57]

The analysis is confirmed.

The issue can be solved it by adding InputProps={{ disabled: true }} to the TextInput, instead of the disabled prop.
This way, the input will appear as disabled for MUI (and will indeed be read only), whereas react-hook-form won't consider it as disabled and will retain its value.

The demo will be updated shortly to implement just that.

[lvernaillen]

What would be the workaround for an AutocompleteInput? That one does not have a InputProps prop.

[slax57]

@lvernaillen You can use TextFieldProps:

                <AutocompleteInput
                    optionText="name"
                    fullWidth
                    TextFieldProps={{ InputProps: { disabled: true } }}
                />

[tyeremenko]

@slax57 did try your solution, but the input is not disabled. you can check here (autocomplete field for adding authors) https://stackblitz.com/edit/github-mjvobu?file=src%2Fposts%2FPostCreate.tsx,src%2Fposts%2FPostEdit.tsx

[slax57]

@tyeremenko I don't see any InputProps on the authors input in the stackblitz you linked.

[adguernier]

After testing on this Stackblitz, using <AutocompleteInput disabled /> won't produce the issue raised here about warnWhenUnsavedChanges.

So no need to use TextFieldProps={{ InputProps: { disabled: true } }} with the <AutocompleteInput> component, the disabled prop seems to work as expected.

Edit: I wrote to fast, after other tests it seems <AutocompleteInput disabled /> produce the unexpected warning describe in this issue.

[lvernaillen]

@slax57 I used the TextFieldProps as you proposed.
Unforunatley the AutoCompleteInput is not disabled at all using that prop.
It does get disabled when simply using the disabled prop but that triggers the warnWhenUnsavedChanges bug of this PR.

Here is a stackblitz where I added a simple AutoCompleteInput to select a tag on the Miscellaneous tab of PostEdit.
A post used to have a tags property (array). I modified the data so that post now has a tag instead of tags.
That way I can use a AutoCompleteInput instead of an AutocompleteArrayInput
As you can see on that Miscellaneous tab of Post edit screen, the autocomplete for a tag is not disabled.

https://stackblitz.com/edit/github-6a8auj?file=src%2Fposts%2FPostEdit.tsx

[lvernaillen]

@adguernier Can you share the steps you did?
In the stackblitz below I use that same <AutocompleteInput/> as in my previous post, but this time with the basic disabled prop. As you can see, it does produce the issue raised here about warnWhenUnsavedChanges.

• Go to the post list.
• Select the first post "Fusce massa lorem, pulvinar a posuere ut, accumsan ac nisi" which has id 13.
• Go to the Miscellaneous tab
• click on the Posts icon in the menu on the left
• Notice the warning of unsaved changes although you did not change anything

So, the question remains. How to disable an <AutocompleteInput/> without the warnWhenUnsavedChanges "bug"?

https://stackblitz.com/edit/github-ny4hdu?file=src%2Fposts%2FPostEdit.tsx,src%2Fposts%2FPostList.tsx,src%2Fposts%2FPostShow.tsx

[slax57]

@lvernaillen You're right!
After a few minutes of research I was not able to find a way to disable the <AutocompleteInput/>. It seems like passing disabled is the only way to disable the input (but then it triggers the RHF issue because it is passed to useInput too).

I can suggest the following workaround however: use readOnly instead.

<AutocompleteInput readOnly />

If that still does not suit your needs, then feel free to open a new issue (specific to <AutocompleteInput/>) so that we investigate further on possible solutions.

[lvernaillen]

Thanks for your reply. I will look into using readonly tomorrow.

Meanwhile I noticed the same issue with ArrayInput. No way to set it disabled without that bug because it has no InputProps.

If readonly is not helpful I'll open a new issue to look into it outside this closed one.