material-ui: MUI: The `value` provided to the Tabs component is invalid....

you need to: <Tabs —> value={false} <— />

this is a bug

I have tried everything, approximately 46 hours trying to figure out a workaround for this error. But no-way. It’s obviously a bug. And it has to be fixed. And for the people who were able to find some workarounds for their projects. Congratulations. But for me, I’ll have to wait for the next update until one of the maintainers commit a patch release for this particular bug, which is the only one I was able to catch during my project which I was working on (for 9 months). Mui is a great library. And this is the only bug I was able to find in “@mui/material”. Some other bugs I encountered in “@mui/x-data-grid”. But let’s forget about that now.

I was able to complete my entire project peacefully, the only part left for me is this error. But it’s okay for now, the project still can survive with that.

How and why is this marked as “Closed” the problem still exist

you need to: <Tabs —> value={false} <— />

Yes Sir! You are right. In fact, for me the problem came from

const [value, setValue] = useState(0) <Tabs —> value={value}

If you do so the error appears. Guess TabPanel is not already created or recognized on first render but …

const [value, setValue] = useState(false) useEffect stating initial 0 or any other tabPanel id value <Tabs —> value={value}

works like a charm as 0 should point to a tabpanel id but false means no id value at all.

Thank you very much @skrimusss

const [value, setValue] = useState(false);

useEffect(() => { setTimeout(() => { setValue(0); }, 100); }, []);

any updates?

@mnajdova Please re-open this issue

<Tabs value={value || false} …

I have been wrestling with this problem for about a month now in a project that was started a few months ago with MUI v5.10.9 and I have tried every trick that I could scrape off the Internet (not many though), but nothing worked for me until I upgraded to v5.11.4 just moments ago and that ugly console error is no more there! 🤩 Hurray! Probably they have fixed it in recent updates. Sheesh! It has been driving me nuts for the last month. Tons of thanks to the MUI guys 👍 for fixing this and allowing my subconscious to have some peace finally 😮‍💨

So, folks, just upgrade your MUI dependency version.

Still have this issue, and if I add <Tabs value={value || false} i can’t see the selected tab on the tabs menu.

Hi, I think I have a reproduction here, at least for the edge-case that I’m running into.

It seems to happen when the component that is rendering the <Tabs /> component suspends. React seems to be setting the element, or a parent, to display: none¹, which means that when <Tabs /> tries to get the bounding rect, it comes back as 0 for height and width. This triggers the error message².

Here’s my sample repo that shows the error:

https://github.com/rossipedia/mui-tabs-invalid-value-repro

¹: I think this is an optimization on React’s part for Suspended trees, since I would’ve assumed that the children of a Suspense component that has been suspended would’ve been unmounted and the DOM cleaned up.

²: Relevant MUI source: https://github.com/mui/material-ui/blob/2093d62046a1fd1342d0e5e6ef7f156faf778b52/packages/mui-material/src/Tabs/Tabs.js#L361-L371

Please reopen the issue its still a problem.

@samislam I realize that you are using labs components. I am not. Maybe this is something to check.

Same here.

I have the exact same problem as @samislam

Is this a bug with my code or a MUI? If it’s MUI is there somewhere better to follow this?