React Material Tabs indicator not showing on first load

Question

I have a simple Tabs setup with React Material UI (https://material-ui.com/components/tabs/) where the path value is set dynamically

export const Subnav: React.FC<Props> = ({ routes = [] }) => {
  const { pathname } = useLocation();
  const { push } = useHistory();    
  const handleChange = (e: ChangeEvent<{}>, path: string) => push(path);

  return (
    <Tabs
      indicatorColor="primary"
      onChange={handleChange}
      scrollButtons="auto"
      textColor="primary"
      value={pathname}
      variant="scrollable"
    >
      {routes.map(r => (
        <Tab label={r.name} value={r.path} />
      ))}
    </Tabs>
  );
};

When I first load a page / navigate to one of the tab routes, the correct tab is selected, but the indicator is not shown. In order for the indicator to be shown I have to click the same tab again or select another.

Answer 1

For this, there is one more way to handle this. In React material UI there is component <Grow/> you can warp <Tabs/> within <Grow/> and <Grow/> will correct the indicator position. Following is the example:

<Grow in={true}>
  <Tabs
   action={ref => ref.updateIndicator()}
  >
   <Tab label="Item One" />
    <Tab label="Item Two" />
    <Tab label="Item Three" />
  <Tabs>
</Grow>