Open kealjones-wk opened 8 months ago
I'd like to help with this. Can I try to solve this issue?
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...
I can reproduce this, as you noted, starting from version 5.14.2
.
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:
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.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.
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.
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:
React.useState(0);
to 6 (the index of the last element)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.
Sooooooooooooo....
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/nostalgic-fog-9z6fzy
Steps:
Current behavior
When the initial
value
is the last tab of aTabs
component with ascrollable
variant the end scroll button overlaps the focused tab.react-dom
^18.0.0
usingReactDOM.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.react-dom
^17.0.0
using legacyReactDOM.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: https://github.com/mui/material-ui/pull/36071 or https://github.com/mui/material-ui/pull/38133
Your environment
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```npx @mui/envinfo
Search keywords: tabs scrollable focus