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

Closed
An88ton opened this issue Jan 21, 2025 · 4 comments · Fixed by #10469
Closed

TabbedForm does not work #10458

An88ton opened this issue Jan 21, 2025 · 4 comments · Fixed by #10469

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.

@slax57
Copy link
Contributor

slax57 commented Jan 23, 2025

I was able to reproduce, and indeed it seems to happen with all 7.x versions of react-router.

The issue seems very similar to this one #9468, tracked in remix-run/react-router#11052 on react-router's repo.
From what I understand, they reverted the BC in v6 and made it an opt-in feature flag (future.v7_relativeSplatPath). But now this change is on by default with react-router v7, and cannot be disabled.

This means we'll need to find an implementation of TabbedForm (and TabbedShowLayout) that works with both react-router v6 and v7.
We may need to use an absolute path instead of a relative path.

Marking as bug.
Thanks for the report!

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

Successfully merging a pull request may close this issue.

4 participants