Closed oleksiisurnin closed 2 weeks ago
Thanks for the report and reproducible example. I can't reproduce just by rendering the form. However, the error occurred while submitting the form.
After investigation, the culprit seems to be the onSubmit
function. Even when extracting the onSubmit
function, the error occurs:
export function UserEdit() {
const onSubmit = (e) => {
console.log(e);
};
return (
<Create>
<TabbedForm
tabs={<TabbedFormTabs variant="scrollable" scrollButtons="auto" />}
onSubmit={onSubmit}
>
{/* ... */}
Have the same issue. When I try to use SimpleForm instead of TabbedForm everything is okay.
Even though I haven't managed to understand why it happens, here's a workaround that fixed the issue in the project I made to reproduce it:
<TabbedForm
tabs={<TabbedFormTabs variant="scrollable" scrollButtons="auto" />}
onSubmit={(values: any) => {
console.log("values", values);
// Return a promise with a settimeout prevent the Maximum update depth exceeded error
return new Promise((resolve) => {
setTimeout(() => {
resolve(undefined);
}, 0);
});
}}
>
@djhi it doesn't work if you add extra 1 or more inputs: https://share.cleanshot.com/59zjXrjM
@djhi @oleksiisurnin https://github.com/react-hook-form/react-hook-form/releases/tag/v7.53.0 release fixes an issue, check on your side, please.
I confirm, using react-hook-form 7.53.0 or above fix the issue.
Fixed by react-hook-form 7.53.0
What you were expecting:
I expected the TabbedForm component to render without errors, regardless of the number of TextInput fields.
What happened instead: When using more than 24 TextInput fields in the TabbedForm component, the application throws an error: "Maximum update depth exceeded." This error does not occur with 24 or fewer TextInput fields.
Steps to reproduce: Create a TabbedForm component with at least 25 TextInput fields distributed across multiple tabs. Render the TabbedForm component. Observe the error "Maximum update depth exceeded" in the console.
Related code:
Other information:
Environment
next: 14.2.5 React-admin version: ^5.0.5 Last version that did not exhibit the issue (if applicable): React version: ^18 Browser: All
repo: https://github.com/oleksiisurnin/TabbedForm-MaxUpdateDepth/