[Tabs] Tab container won't scroll when only one tab is (partially) visible

[frankkluijtmans]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I expect the Tabs container to be scrollable, also when only one tab is (partially) visible. Right now scrollable behavior is not working when the parent width is smaller than the width of a single Tab. I forked the demo CodeSandbox to illustrate the bug.

Expected behavior 🤔

The Tab container should scroll an X amount, even when the parent container cannot fit the width of a Tab.

Steps to reproduce 🕹

Steps:

1. Create a Tabs component that has a width <= to a single child Tab.
2. Try scrolling using the buttons.
3. I forked the demo CodeSandbox to illustrate the bug.

Context 🔦

I'm trying to use scrollable Mui tabs in tight spaces where the display name of the tab also has a variable length. Sometimes this results in the tabs component having a width smaller than a single tab.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 16.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.24.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.39)

[MahmoudMans]

hello @frankkluijtmans, i tested your sandbox, it seems that the error is fixed or maybe i didn't understand well the problems
here is a screen that show a tab that is partially visible but it still scrollable

[frankkluijtmans]

@MahmoudMans Sorry for the unclear explanation, I also realized the CodeSandbox didn't demo this issue correct so I updated it 😅 The case I'm talking about here (which is admittedly a bit of an edge case) happens when the tab container is narrow enough for only 1 tab to be partially visible. Since current behavior would only scroll the container by the width of fully visible tabs, it would not scroll at all in such a case.

I took some time to create a PR with my proposed solution: #32778 . This would check if the first visible element is smaller than the tab container, and then scroll by the width of that tab. I also added a unit test to check such a case.

[oliviertassinari]

v4.12.4: no bugs, proof: https://codesandbox.io/s/material-demo-forked-8zbt9q?file=/demo.js
v5.0.0: bug, proof: https://codesandbox.io/s/scrollabletabsbuttonforce-material-demo-forked-qqsn9y?file=/package.json