Material UI tabs not working with Scroll to

Question

I am trying to scroll to div when clicking on Tab with Material UI Tabs, UseRef and ScrollTo.

Sand box Link: https://codesandbox.io/s/exciting-sound-mrw2v

when clicked on Tab 2, I am expecting to scroll onto Tab2 Contents and Tab 1 contents visible on scrolling.Currently it requires two clicks to scroll onto the div, I am wondering why its behind one click. Any leads appreciated. Thanks!

Answer 1

I edited your example and I added a useEffect hook and if you press a tab 2 is scrolling into this content.

https://codesandbox.io/s/lingering-voice-y45cg

Answer 2

use this syntax

 <Tabs
  classes={{ root: classes.root, scroller: classes.scroller }}
  value={active}
  onChange={(event, newValue) => {
    setActive(newValue);
  }}
  indicatorColor="primary"
  textColor="primary"
  variant={"scrollable"}
  scrollButtons={"on"}
>
  {cities.map((city, index) => (
    <Tab key={index} label={city} value={city} />
  ))}
</Tabs>

this two line of properties important

variant={"scrollable"}
  scrollButtons={"on"}

full example link: https://codesandbox.io/s/material-ui-centered-scrollable-tabs-ud26w?file=/index.js:645-1048