[Tabs] Conditionally rendering of `Tab` not working properly

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Add some tabs

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="basic tabs example"
>
  <Tab label="Item One" {...a11yProps(0)} />
  <Tab label="Item Two" {...a11yProps(1)} />
  <Tab label="Item Three" {...a11yProps(2)} />
</Tabs>

1. Wrap them in a component that checks if the tab should be displayed, for simplicity I am just retuning the children wrapped in a fragment but in theory it should make some checks to return the children or null

const Authorizer = ({ children }: { children: React.ReactNode }) => (
  <>{children}</>
);

<Authorizer>
  <Tab label="Item One" {...a11yProps(0)} />
</Authorizer>

https://codesandbox.io/s/unruffled-thunder-f405xf?file=/demo.tsx

Current behavior 😯

Tabs stop working, they can be clicked but don’t navigate to the tab panel

Expected behavior 🤔

Tabs should work normally as there is not being introduced anything additional in the tree

Context 🔦

I am trying to show or hide the tabs depending on the user permissions, for this I am using an Authorizer component that returns the children (wrapped in a fragment) or null depending on if the user has the right permissions but by doing so, the tabs stop working correctly.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 12.6
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 106.0.5249.103
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.0
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.85 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.91 => 5.0.0-alpha.91 
    @mui/material: ^5.8.4 => 5.8.4 
    @mui/private-theming:  5.8.4 
    @mui/styled-engine:  5.8.0 
    @mui/system:  5.8.4 
    @mui/types:  7.1.4 
    @mui/utils:  5.8.4 
    @mui/x-data-grid: ^5.12.3 => 5.12.3 
    @types/react: ^17.0.33 => 17.0.44 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript: ^4.5.4 => 4.6.3 

Using Chrome

[mnajdova]

The reason is because you are not propagating all props to the underlaying Tab component. The Tabs uses the React.cloneElement API for providing props to the children it receives. Here is a working example: https://codesandbox.io/s/quizzical-hawking-q6ws58?file=/demo.tsx

Another useful example in terms of customization would be: https://mui.com/material-ui/react-tabs/#customization I hope this explanation helps.

If someone wants to extend the docs adding more information around this, would be great. cc @samuelsycamore

[AChangXD]

How I’m creating/passing the <Tabs>: setToolbarItems( <> <Tabs value={selectedTab} // If I get rid of this value field, things will work again but it won't display which tab is selected. onChange={(event, newValue) => { setSelectedTab(newValue); }} > <Tab label="Overview"></Tab> <Tab label="Sales Logs"></Tab> </Tabs> </> );

I’m making the <AppBar> dynamically change its content based on the page it’s on. On certain pages, it will display an <Tabs> for navigation within that page.

Code for <AppBar>:

`return ( <> <Box sx={{ minHeight: 64, flexGrow: 1 }}> <AppBar position=“static” sx={{ paddingLeft: 0, paddingRight: 0 }} > <Toolbar sx={{ minHeight: 64, margin: 0, justifyContent: ‘center’, backgroundColor: ‘white’, }} > {showLeftNav && ( <IconButton edge=“start” color=“inherit” aria-label=“menu” sx={{ paddingLeft: 0, width: 64 }} onClick={() => { setShowLeftNav((previousState) => !previousState); }} > <MenuIcon /> </IconButton> )}

        {toolbarItems}                        <- where the <Tabs> end up

        {showLeftNav && <Box sx={{ width: 64 }}></Box>}
      </Toolbar>
    </AppBar>
  </Box>
</>

);`