TabbedForm and TabbedShowLayout tab navigation is broken

[silversonicaxel]

What you were expecting:
I've an <Edit /> component View page to edit a record and I use it in combination with <TabbedForm /> component.
I expect to switch among <TabbedForm.Tab />s and edit the fields of the record.

What happened instead:
The <TabbedForm.Tab />s beyond the first one are not reachable, instead first <TabbedForm.Tab /> keeps being visible. What also happens in the url is that, every time I click a <TabbedForm.Tab />, the url keeps adding the index of the clicked <TabbedForm.Tab /> to the end of the url. Application is not broken though, so no javascript error occurs.

Steps to reproduce:
The application is based on Nextjs and ReactAdmin, but it is private, so unsharable.

What I can say is that I've a CRUD scenario, with an Edit view based on Tabs and since the upgrade from version 4.14.3 to 4.16.0 happened, the Application has this behaviour.

Related code:
I can't really show examples, but an official react-admin demo example https://github.com/marmelab/react-admin/tree/master/examples/simple visible at this link
https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple shows also that current implementation has the same issue. To reproduce it in the example app do the following steps:

• Click on the left sidebar the menu item Tags
• Edit one tag, for example Sport
• Edit one item in the bottom grid.
• Click one of the tabs in the Edit view
• Tabs are not switching

Other information:
/

Environment

• React-admin version: 4.16.0
• Last version that did not exhibit the issue (if applicable): 4.14.3
• React version: 18.2.0
• Browser: all
• Stack trace (in case of a JS error): /

[fzaninotto]

Yep, I saw that bug, too, only a bit later. This is a regression, we'll work on fixing it soon.

[silversonicaxel]

As far as I understand, the simple example is used for e2e tests. Could something be improved there?

[slax57]

Turns out this is due to 2 regressions introduced in react-router v6.19.0 and v6.20.0.

I have opened an issue on their repo to request for a fix: remix-run/react-router#11053

Until this is fixed, you will need to use version v6.18.0 at most, which does not show the issue.

Thanks for the report!

[silversonicaxel]

Thanks for further investigation!

[fzaninotto]

I think that using <TabbedForm syncWithLocation={false}> allows to temporarily fix the bug, if you don't need the tabs to be synced with location (and support the back button in tab navigation).

[StefanFl]

I see the same bug for <TabbedShowLayout>.

[1vanguard]

I have the same problem in the TabbedForm component

[fzaninotto]

So the root cause for this bug is a couple regressions that landed in react-router 6.19 and 6.20.

• [Bug]: useResolvedPath breaking. remix-run/react-router#11052
• [Bug]: Regression of useResolvedPath in 6.19.0 remix-run/react-router#11048

Unfortunately, the react-router team doesn't want to revert these breaking changes published in minor releases. They closed the issues in their GitHub repository.

We have no other option than to forbid recent react-router versions in react-admin's dependencies.

[silversonicaxel]

@fzaninotto maybe they are going to reopen them both, first it is!

[fzaninotto]

Fixed by #9480, where we forbid recent react-router versions in react-admin's dependencies.

We may relax these requirements in the future if the react-router fixes the problem upstream.

[fzaninotto]

I reverted #9480 in #9489 as the react-router team has fixed the problem upstream by publishing a new version, 6.20.1.

If you encounter this problem, please upgrade your dependencies to the latest react-router and react-router-dom versions (>= 6.20.1)