Tabs Component showing underline on wrong tab

[bobstoovee]

When there is a condition component which either renders a tab or null as a child of component the underline is show on the next tab. ie:

There was a fix #8107 for {null} children of tabs, but that fix does not account for the edge case where the conditional logic is hidden within a component. For example,

This component will render "null" but it will be picked up as a valid child since the component is using React.isValidElement() to verify against a null, and this is a valid child.(probably should only count children that are tabs, and ignore other elements which shouldn't be there.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Environment, Create React App, Node 12, google chrome, javascript (not typescript)

[bobstoovee]

Addendum

If the condition renders the component instead of null, everything works. My suggested solution would not work with this since it would be FeatureSwitch > Tab which would be skipped in the child search.

Is there a way to check if any DOM would be rendered by a child OR null?

[oliviertassinari]

@bobstoovee Could you provide a reproduction?

At some point, @eps1lon proposed to use a ref on each tab item. It would solve the issue but it changes the expectation of your wrapping tab, you would need to forward the ref to work correctly. I'm not aware of any other alternative.

[bobstoovee]

example run in npm create-react-app ...

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

const Conditional = ({conditional, component}) => conditional ? component : null; 

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <Typography
      component="div"
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      <Box p={3}>{children}</Box>
    </Typography>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));
function App() {
 const classes = useStyles();
  const [value, setValue] = React.useState(0);

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
          <Conditional component={<Tab label="Item One" {...a11yProps(0)} />} conditional={false} />
          <Tab label="Item Two" {...a11yProps(1)} />
          <Tab label="Item Three" {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        Item One
      </TabPanel>
      <TabPanel value={value} index={1}>
        Item Two
      </TabPanel>
      <TabPanel value={value} index={2}>
        Item Three
      </TabPanel>
    </div>
  );
}

export default App;

[bobstoovee]

My current workaround is to use a function that either returns null or the component and then call it in the render method. This leaves no extra children in element. Seems a bit slow, but that might be my performance issue.

[oliviertassinari]

I'm closing as won't fix, at least, for now. This problem doesn't seem to impact a lot of people, I hope we can live with it.
I would recommend the following: set the pruning logic so that the Tabs component can see a null chil element. This is a limitation of our usage of the cloneElement API. Thanks for raising it.