React-admin: DateInput or ArrayInput with warnWhenUnsavedChanges are triggering an alert when submitting the form

[otroboe]

Hello!

What you were expecting:
I'm using the warnWhenUnsavedChanges option on my TabbedForm, it was working as expected until I add a DateInput in my form.
When I update my date in the form, I don't want to have the "unsaved" alert when I'm submitting my changes.

What happened instead:

• When I change the date in my form, I have the "unsaved" alert when I submit the form.
• When I change other fields (and not the date), I don't have the issue.
• When I confirm the alert, the submit is working, my date is correctly saved.
• It seems to be the same issue with DateTimeInput.

Steps to reproduce:
Using the option warnWhenUnsavedChanges in a TabbedForm, with a DateInput inside it.

Related code:
I don't have much code to show, the components are a bit split:

export const UnitCreate: FC = (props: any) => (
  <Create {...props} undoable={0}>
    <TabbedForm warnWhenUnsavedChanges>
      <MainFormTab />
      <TermsFormTab />
    </TabbedForm>
  </Create>
);

export const MainFormTab: FC<MainFormTabProps> = (props: any) => {
  return (
    <GenericMainFormTab {...props} hideDefaultField>
      <TextInput
        disabled={props.disabled}
        fullWidth
        label="resources.unit.title"
        source="title"
        validate={[required()]}
      />
      <DateInput
        disabled={props.disabled}
        label="resources.unit.rightsEndDate"
        source="rightsEndDate"
      />
    </GenericMainFormTab>
  );
};

Environment

• React-admin version: 3.8.4
• React version: 16.13.1
• Browser: Chrome 85

[djhi]

Thanks for reporting this. Can you please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple)?

[otroboe]

@djhi I tried to reproduce the bug on the sandbox with the <TagEdit /> component, but with no "luck".
I tried to reproduce the structure of my app, with TabbedForm / FormTab and stuff, but it keeps working :smile:

So there must be something else I'm doing to trigger this error, I'll keep investigate on my side inside my project. But If I don't find anything, I'll close this issue!

Thank you!

[otroboe]

@djhi I found how to reproduce it! In my project, I have to remove all of the "Array Inputs" to make it work:

<ReferenceArrayInput>
  <AutocompleteArrayInput />
</ReferenceArrayInput>

and

<ArrayInput>
  <SimpleFormIterator />
</ArrayInput>

So I tried to find one of these cases in the sandbox, and I didn't find the exact same setup, but the same bug, with the example (without doing a fork).

You have to pick a Post with already some backLinks, for example the Omnis voluptate one, and change only the date of the backlink, and press "Save", you should see the "unsaved warning".

When updating only the pushishedAt date, we don't have the issue, that's the use case in my project which is failing. But I'm pretty sure both are related, because triggered by "Array Inputs".

I'm joining the "video" of the bug in the example, tell me if you need more informations!
Thank you!

[djhi]

A link to the codesandbox would help

[otroboe]

I didn't need to fork it, the bug in the gif from my previous message, is coming from the example:
https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

[otroboe]

I found out that the issue is not only for the DateInput. If you modify the _url_ of a backlink in the example, it will trigger the alert too.

Edit: In my project, when I modify my ReferenceArrayInput / AutocompleteArrayInput, it's triggering the alert also :(

[otroboe]

What more infos do I need to give? I can rename and edit the issue, but I simply describe an issue with the example afterall.

[djhi]

Should be enough, thanks. We now need time to investigate

[MLukman]

I too have the same issue with ArrayInput.

[otroboe]

@MLukman Yes, it's not only related with the Date, I have the issue too with ArrayInput.
Did you find any workarounds?

[hacktisch]

My theory is that certain form fields dispatch a change event to the react-final-form state, when they are reinitialized after the entity is saved (the backend returns the current values of the saved entity, and fills those into the form).
Because the change is triggered, the react-final-form state gets the flag "dirty" or not "pristine" as it's called internally.
And React-Admin fires a browser location change to the react-router, albeit it to the same url path (if you are on /#/page/10, it redirects you to /#/page/10).
As you have warnWhenUnsavedChanges turned on, it protests against this "url change"

[lilit-melkonyan-im]

I have the same issue after updating the react-admin version from 3.8.2 to 3.11.2. It works for some FormWithRedirect forms and doesn't work for TabbedForms at all. Any news??

[djhi]

See #5776 which should be released in next patch version

[fzaninotto]

Fixed by #5776