Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TabbedForm does not work #10458

Open
An88ton opened this issue Jan 21, 2025 · 3 comments
Open

TabbedForm does not work #10458

An88ton opened this issue Jan 21, 2025 · 3 comments

Comments

@An88ton
Copy link

An88ton commented Jan 21, 2025

I've got weird bug TabbedForm just stopped working shows only first tab, on first click to other tab system highlight it but do not redirect with any other click on tab highlighting disappears, but still only first tab rendered

Image
on each click, it concatenates URL

Image

syncWithLocation={false} do not resolve the issue
reproducing on all browsers

Here is my dependencies 
"dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^5.16.7",
    "@mui/material": "^5.16.7",
    "@mui/x-date-pickers": "^7.18.0",
    "@tailwindcss/forms": "^0.5.7",
    "qs": "^6.13.0",
    "query-string": "^9.1.0",
    "ra-data-json-server": "^5.1.0",
    "ra-i18n-polyglot": "^5.4.2",
    "react": "^18.3.0",
    "react-admin": "^5.0.5",
    "react-dom": "^18.3.0",
    "react-multi-date-picker": "^4.5.2",
    "react-social-login-buttons": "^4.1.0",
    "reactjs-social-login": "^2.6.3"
  },
@fzaninotto
Copy link
Member

TabbedForm works fine in our stories, tests and demos. You probably have a duplicate react-router package.

If you can't resolve the problem on your side, we'll need a repro to investigate this. Also, please follow the issue template.

@PedroPerpetua
Copy link
Contributor

PedroPerpetua commented Jan 22, 2025

I'm also reporting this issue after recently upgrading dependencies on a large project (react-admin went from 5.2.2 to 5.5.0 for reference).

The issue seems to affect not just TabbedForm but also, for example, TabbedShowLayout.

I verified that I didn't have duplicate versions of react-router; however, the issue appeared to be with react-router version >= 7.0.0 (as react-admin added support on version 5.5.0).

After forcing the react-router and react-router-dom back to 6.28.2, the issue disappeared.

So a workaround if you stumble on this issue for now is adding the following to your package.json (for yarn):

"resolutions": {
  "react-router": "6.28.2",
  "react-router-dom": "6.28.2",
}

@PedroPerpetua
Copy link
Contributor

@fzaninotto as I was setting up a reproduction repository, I found that simply picking up the "Simple Example" stackblitz and bumping the react-router and react-router-dom dependencies to 7.1.3 is enough for this issue to show up. Let me know if you need an actual stackblitz fork with this two line change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants