Material-ui: [Tabs] Support "auto" as "scrollable" value

[fzaninotto]

When using <Tabs scrollable> with few tabs, the first tab seems not properly aligned to the left. I need the ability to auto-set the scrollable behavior based on the screen width and the number of tabs.

• [x] This is a v1.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would like tabs that are scrollable when there isn't enough width, but not scrollable otherwise. The scrollable prop should be automatically enabled based on whether the screen is large enough to display all the tabs or not. Therefore, setting scrollable to true or false doesn't work - I'd need an auto value.

I know I can use withWidth to do that in userland, but it's just such a common need that I believe it should be implemented in core.

Current Behavior

scrollable can only be set to true or false, so the tabs always look bad:

• if I have scrollable but a very large screen, the first tab isn't properly aligned
• if I have scrollable=false but a narrow screen, I can't get to the last tab

Context

I'm developing a component that can contain an arbitrary number of tabs - from a few to many. In the latter case, the scrollable option is a must. But when enabled in the first case, the first tab isn't properly aligned on the left:

[oliviertassinari]

@fzaninotto I'm personally using scrollable={true} scrollButtons="off" most of the time. Do you need to display the scroll buttons?

[fzaninotto]

IMO It's not ideal on desktop screens to hide buttons, but I can live with that. Thanks for your answer.

[MikeSuiter]

@fzaninotto I'm personally using scrollable={true} scrollButtons="off" most of the time. Do you need to display the scroll buttons?

@oliviertassinari I just set my app to the above and on desktop how to you scroll the tabs? I can click a tab that is clipped and it will scroll into view but how can I get to tabs that are completely off screen?

I know both issues were closed but I think a lot of people would appreciate the enhancement. The UI just doesn't look right with no scroll button and whitespace for the first tab. Several people here noticed it right away.

[oliviertassinari]

how to you scroll the tabs?

@MikeSuiter It depends on the platform, on Windows you have a scrollbar, on MacOs you can use two fingers in the trackpad.

The first issue was closed because it's pretty much the same pain point than here. So better group the discussion.

[MikeSuiter]

@oliviertassinari This screenshot is from Chrome 69 on Windows 10 and once a tab is completely off screen there is no way to get back to it. Should I have a scrollbar here? I tried click dragging and that doesn't work.

Here is the same screenshot with wider browser - you can see the Home tab here which you can't get back to when browser is narrower.

This is using these props:
<Tabs value={selected} onChange={onTabSelect} scrollable scrollButtons="off">

Thanks for reopening this as I think others will benefit from it and I agree consolidating my request into this one.

[gino-m]

IMO this is still an issue from a UX perspective, since without any affordance indicating the tabs are scrollable, users have no reliable way to know there are more tabs off screen. On the other hand, the additional space mentioned by the OP required with scroll="auto" makes desktop UIs look broken. Could this issue be reopened so it can be revisited?

In the meantime, here's a hacky workaround I came up with to hide/show the scroll buttons when the tab width exceeds that of the container (on window resize and when adding tabs):
https://codesandbox.io/s/q34yxjkmwj

Maybe this could be added to the Tabs impl, controlled by a prop like scrollHide="auto|on|off", for ex?

[fzaninotto]

@gino-m This is a good workaround, thanks!

[vajnorcan]

Not to be nitpicking nor criticizing but why the 'scrollable'=auto doesn't detect and compare the widths of scroll container and its parent width based on which the buttons would appear? And to take it further, based on the x scroll value to display hide the scroll buttons.
I just don't think that having either a blank, padded space or an actual button or no scroll functionality is a good UI. Thanks for the great library btw.