Tabs not scroling to the correct tab after navigation

[bwnkmd]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/still-snow-z385rn

Steps:

1. Add a tabs component with more tabs then the view width can hold
2. scrollButtons="auto"
3. set the selected tab to a tab outside the view
4. 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