TabbedFormView passes warnWhenUnsavedChanges to styled div, leads to react error

[magnattic]

What you were expecting: No console errors when using <TabbedForm warnWhenUnsavedChanges>.

What happened instead: The following console error appears:

Warning: React does not recognize the warnWhenUnsavedChanges prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase warnwhenunsavedchanges instead. If you accidentally passed it from a parent component, remove it from the DOM element. at div at http://cp.localhost:3001/static/js/bundle.js:36211:66 at TabbedFormView (http://cp.localhost:3001/static/js/bundle.js:229006:15) at form at FormGroupsProvider (http://cp.localhost:3001/static/js/bundle.js:218155:15) at FormProvider (http://cp.localhost:3001/static/js/bundle.js:353840:5) at LabelPrefixContextProvider (http://cp.localhost:3001/static/js/bundle.js:213242:13) at RecordContextProvider (http://cp.localhost:3001/static/js/bundle.js:216310:15) at OptionalRecordContextProvider (http://cp.localhost:3001/static/js/bundle.js:216538:12) at Form (http://cp.localhost:3001/static/js/bundle.js:218346:15) at TabbedForm (http://cp.localhost:3001/static/js/bundle.js:229099:11) ...

Steps to reproduce: Use the following code somewhere and open the tab:

      <Edit id={id}>
        <TabbedForm warnWhenUnsavedChanges>
          <FormTab label="General" path="general"></FormTab>
        </TabbedForm>
      </Edit>

Related code: I don't even have to fork the default codesandbox, just open the Posts Edit view in the simple ra example to see the error:

• https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple (v4)

Other information: The issue is that TabbedForm passes the prop to the styled div, where it is not valid: https://github.com/marmelab/react-admin/blob/d8737f2234eddd6424419ed7e8a816558b8f9e54/packages/ra-ui-materialui/src/form/TabbedFormView.tsx#L62-L64 A solution could be to extend the sanitizeRestProps function to exclude warnWhenUnsavedChanges: https://github.com/marmelab/react-admin/blob/d8737f2234eddd6424419ed7e8a816558b8f9e54/packages/ra-ui-materialui/src/form/TabbedFormView.tsx#L152

Environment

• React-admin version: 4.1.2
• Last version that did not exhibit the issue (if applicable): ?
• React version: 18.1.0
• Browser: Chrome

[antoinefricker]

Reproduced ! Thanks for reporting, you've done most of the job - would you submit a pull request?

[magnattic]

Yes, will provide a PR.

[magnattic]

@septentrion-730n PR is open, let me know if there is something missing.

[fzaninotto]

Fixed by 396a1b1e380fe4d0f9c932a2dc9796099db33839