[material-ui][Tabs] End scroll button overlaps last tab when it is the initial value

[kealjones-wk]

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

npx @mui/envinfo

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

Search keywords: tabs scrollable focus

[trizotti]

I'd like to help with this. Can I try to solve this issue?

[trizotti]

I tried your code in a playground, @kealjones-wk , but it seems to be working normally, without any overlaping... Here is a gif of the page being loaded:

It is the exact code you provided, but running in a development playground... I couldn't reproduce the overlap behavior...

[ZeeshanTamboli]

I can reproduce this, as you noted, starting from version 5.14.2.

[kealjones-wk]

I just updated the issue description with some more details and an improved live example to https://codesandbox.io/p/sandbox/nostalgic-fog-9z6fzy which properly demos the issue.

While fixing the demo I noticed some things:

• With react-dom ^18.0.0 using ReactDOM.createRoot api (concurrent rendering), this still 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.

[ZeeshanTamboli]

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

@kealjones-wk It does not occur intermittently for me with v18. It happens everytime. Here is the CodeSandbox using react-dom version 18.0.0: https://codesandbox.io/p/sandbox/cocky-marco-fwgy3q.

One thing I noticed is that it doesn't overlap during the initial render, meaning when I first open the CodeSandbox.

[janeisenmenger]

I am facing the same issue. I have also noticed that this behaviour (as in the overlapping) is present in the actual documentation, see here: https://mui.com/material-ui/react-tabs/#automatic-scroll-buttons.

How to reproduce:

• open the documentation (https://mui.com/material-ui/react-tabs/#automatic-scroll-buttons)
• click 'expand code'
• change the value in React.useState(0); to 6 (the index of the last element)
• -> in the preview box, the text for "Item Seven" is overlapped by the scroll button

What I have noticed during local debugging is that even when I force a scrollIntoView on the last element, it will still be overlapped. However, delaying the scrollIntoView by half a second seems to then scroll correctly and show the last element as expected.

[kealjones-wk]

Sooooooooooooo....