Tabs not scrolling to the correct tab after navigation #44211
Description
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/still-snow-z385rn
Steps:
- Add a tabs component with more tabs then the view width can hold
- scrollButtons="auto"
- set the selected tab to a tab outside the view
- refresh the view an see that the selected tab is only partly in view
Make sure to set browser width smaller then the tabs container.
You can here see a small green line and the tab is not in view.
With scrollButtons={true} it works
Current behavior
The selected tab is not in view.
Expected behavior
The selected tab is in view.
Context
We have dynamic tabs and device sizes, and we dont want arrows all the time, but not scrolling the selected tab into view is causing out users to be confused, would be nice if the tabs component scrolled to the selected tab
Your environment
npx @mui/envinfo
Browser: Chrome
System:
OS: macOS 14.7
Binaries:
Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm
pnpm: 9.12.2 - ~/.nvm/versions/node/v20.13.1/bin/pnpm
Browsers:
Chrome: 130.0.6723.70
Edge: Not Found
Safari: 18.0.1
npmPackages:
@emotion/react: 11.10.4 => 11.10.4
@emotion/styled: 11.10.4 => 11.10.4
@mui/icons-material: 5.16.7 => 5.16.7
@mui/lab: 5.0.0-alpha.173 => 5.0.0-alpha.173
@mui/material: 5.16.7 => 5.16.7
@mui/styles: 5.16.7 => 5.16.7
@mui/system: 5.16.7 => 5.16.7
@mui/x-data-grid-premium: 7.20.0 => 7.20.0
@mui/x-date-pickers: 6.20.2 => 6.20.2
@mui/x-date-pickers-pro: 6.20.2 => 6.20.2
@mui/x-license: 7.20.0 => 7.20.0
@mui/x-tree-view: 7.20.0 => 7.20.0
@types/react: 18.3.1 => 18.3.1
react: 18.3.1 => 18.3.1
react-dom: 18.3.0 => 18.3.0
typescript: 4.6.4 => 4.6.4
Search keywords: tabs scroll