[Tabs] Nested tabs cause console error

[fzaninotto]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Given the page contains a tab with tabs:

┌-------┓
| FIRST | SECOND 
|       └––––––––┓
| ┌---┓          |
| | A | B        |
| |   └–––┓      |
| | lorem |      |
| └–––––––┛      |
└––––––––––––––––┛

When the user switches to the second tab, MUI logs an error:

MUI: The value provided to the Tabs component is invalid.

Expected behavior 🤔

No error 😄

Steps to reproduce 🕹

1. Open https://codesandbox.io/s/frosty-fast-k5whqv
2. Click on the 'SECOND' tab header
3. An error occurs in the console

Context 🔦

This bug appeared in react-admin, when a user tried to nest <TranslatableInputs> inside a <TabbedForm> (marmelab/react-admin#7922)

Your environment 🌎

• Chrome
• MUI 5.9.1

[mnajdova]

Thanks for the report. Agree, it looks strange. Maybe we can update the condition for the warning to not do it if the whole tabs element is hidden, maybe something like this would be better:

index 4dbc2a5dee..052b96a54b 100644
--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -359,7 +359,9 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
             !warnedOnceTabPresent &&
             tabMeta &&
             tabMeta.width === 0 &&
-            tabMeta.height === 0
+            tabMeta.height === 0 &&
+            // if the tab list element is hidden, don't warn
+            tabsMeta.clientWidth !== 0
           ) {
             tabsMeta = null;
             console.error(

Would be great if we can cover these two scenarios with tests. Would you be interested in creating a PR for this?

[fzaninotto]

Maybe we can update the condition for the warning to not do it if the whole tabs element is hidden

As long as it fixes the warning in the case I described, it's fine by me.

Would you be interested in creating a PR for this?

No, sorry - I have my own bugs to fix in react-admin!

[joshlang]

This one's getting me, too

Here's my scenario:

<Box display={{ xs: "none", lg: "block" }}>
   <Tabs ...
</Box>

Annoying because of the debug error messages dumped into console. But everything still works.

[hbjORbj]

I added commits to wrap up the PR: #34026