marmelab / react-admin

A frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design
http://marmelab.com/react-admin
MIT License
24.95k stars 5.25k forks source link

TabbedFormView passes warnWhenUnsavedChanges to styled div, leads to react error #7871

Closed magnattic closed 2 years ago

magnattic commented 2 years ago

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:

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

antoinefricker commented 2 years ago

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

magnattic commented 2 years ago

Yes, will provide a PR.

magnattic commented 2 years ago

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

fzaninotto commented 2 years ago

Fixed by 396a1b1e380fe4d0f9c932a2dc9796099db33839