marmelab
Inputs are not displayed when using TabbedForm
What you were expecting:
When navigating to an edit route that uses TabbedForm the inputs should be displayed.
What happened instead:
When navigating to an edit route that uses TabbedForm the inputs are not displayed.
Steps to reproduce:
- Clone the sample application. https://github.com/armandosg/react-admin-v5
- Run the server
- Navigate to the "Resources" list
- Click on the first item
- Check that the input are not displayed
- Click on any tab link
- The inputs are displayed now
Related code:
https://github.com/armandosg/react-admin-v5
Other information:
I'm seeing that this only happens when the id of the resource contains special characters.
Environment
- React-admin version: 5.0.1
- Last version that did not exhibit the issue (if applicable): 4.x.x
- React version: 18
- Browser: Chrome
- Stack trace (in case of a JS error):
Confirmed, thanks.
Tested on https://codesandbox.io/p/devbox/github/armandosg/react-admin-v5/tree/main, it seems the bug only occurs on the first resource, the one with a colon in its id ("1:prod:resource1"). So it seems to be that the TabbedForm routing is too strict on the id it accepts.
This issue has been introduced by https://github.com/remix-run/react-router/pull/11199 released in [email protected].
The location returned by useLocation is "/resource/1:prod:resource1/" while useResolvedPath now returns "/resource/1%3Aprod%3Aresource1"
