Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/nostalgic-fog-9z6fzy

Steps:

1. Observe the end scroll button overlapping the initially focused tab.

Current behavior

When the initial value is the last tab of a Tabs component with a scrollable variant the end scroll button overlaps the focused tab.

• With react-dom ^18.0.0 using ReactDOM.createRoot api (concurrent rendering), this happens but MUCH more intermittently. Hitting refresh on the sandbox demo page a few times will eventually make it happen.
• With react-dom ^17.0.0 using legacy ReactDOM.render it happens every time.

It seems like it is a race condition between when the scrolling happens and when the scroll buttons are rendered into the dom.

Expected behavior

The end scroll button shouldn't overlap the focused tab on initial render.

Context

I am trying to make the UX of Tabs better. It has made it awkward for users to know the tab is even focused.

Pretty confident it was introduced in 5.14.2 by either:
#36071
or
#38133

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: tabs scrollable focus