Clone not working with a TabbedForm on the Create component

[lvernaillen]

What you were expecting:

When cloning a resource, a tabbed create form shows all the values from the original record (except the omitted id). And when changes the values in that create form, the changes are kept even when switching tabs.

What happened instead:

The create form looks ok, it shows the values of the cloned record. However when changing prefilled values on tab 1 and navigate to tab 2. When you go back to tab 1, the changes are gone.

Steps to reproduce:

• Go to posts resource
• Click on a post
• Click "Clone" button
• Fill in the "id" field (which is empty because omitted in the clone)
• Change the "title" (which was prefilled with value of cloned record)
• Switch to second tab "Misc" of the create form by clicking on that tab
• Go back to first tab "General" by clicking on that tab
• Note that "id" is still filled in
• Note that "title" changes are gone... it is back to it's original value of the cloned record. ==> bug
• Change the "title" again
• Switch to second tab and back to first tab again
• Note that this second time the "title" changes are still there

Related code:

• A link to a GitHub repo with the minimal codebase to reproduce the issue See https://github.com/lvernaillen/ra-tabbedform-clone

• Started from the basic react-admin app via npx [email protected] ra-tabbedform-clone
• Added a CloneStateButton to clone via location.state instead of via search
• Made a simple PostEdit component
• Made a simple PostCreate component that uses TabbedForm

Other information:

Only related issue I found is from the v3 version: https://github.com/marmelab/react-admin/issues/4066

Tried to reproduce this on latest react-admin v5.7.2 via npx create-react-admin@latest ra-tabbedform-latest --data-provider fakerest --resource posts. But there it seems to work.

Using the regular CloneButton this problem does not occur. However, that uses the location search and I do not want my complete record state in the URL. The docs state "In general, using the location state is a safe bet."

Environment

• React-admin version: 4.16.20
• Last version that did not exhibit the issue (if applicable):
• React version: 18.3.1
• Browser: Chrome Version 131.0.6778.265 (Official Build) (64-bit)
• Stack trace (in case of a JS error):

[lvernaillen]

I also tried cloning via a CreateButton like below. It has the same problem.

export const CloneViaCreateButton = () => {
	const resource = useResourceContext();
	const record = useRecordContext();
	return (
		<CreateButton
			resource={resource}
			state={{ record: omitId(record) }}
			label="CloneViaCreate"
		/>
	);
};

[fzaninotto]

Considering this bug doesn't appear on the latest version, I recommend that you upgrade to react-admin v5.

[fzaninotto]

I tried running your example and I see an error in the console due to your custom CloneStateButton. Please fix this error because your problem may come from there.

Note that I did another test by using, in the simple example, a TabbedForm for the PostCreate view, and I couldn't reproduce the bug.

Finally, I see that your example is using React 18. If you want to use React 18, you must use react-admin v5. React-admin v5 is limited to React 17.