[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.

[genepaul]

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?

It seems this is still an issue. We now are able to show or hide scroll buttons, but if we hide the scroll buttons, there's no indicator that there are more buttons, or that the buttons are scrollable. What I find interesting is that Google Maps appears to have a different tab behavior, where as you click tabs, it scrolls the container to show there are more tabs:

https://user-images.githubusercontent.com/66479/192386597-58a47512-b5b4-4b7f-b6ac-9e5a8801231b.mov

Is this something that could be implemented in the Tabs component? Is this part of the Material spec?

Edited to add: Here's an example from the MUI documentation that shows the issue:

When you click the last visible tab, it scrolls only that tab into view. I had to shift+mouse wheel to scroll the container to see that there were more tabs. There's absolutely no way a user would know to do that.

[fzaninotto]

@genepaul we're only using MUI's Tab component here. I suggest you open an issue about it on their repository.

[MahsaMirzadaei]

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?

It seems this is still an issue. We now are able to show or hide scroll buttons, but if we hide the scroll buttons, there's no indicator that there are more buttons, or that the buttons are scrollable. What I find interesting is that Google Maps appears to have a different tab behavior, where as you click tabs, it scrolls the container to show there are more tabs:

Is this something that could be implemented in the Tabs component? Is this part of the Material spec?

Edited to add: Here's an example from the MUI documentation that shows the issue:

When you click the last visible tab, it scrolls only that tab into view. I had to shift+mouse wheel to scroll the container to see that there were more tabs. There's absolutely no way a user would know to do that.

const tabs = useRef()

useEffect(()=>{
    if (tab === 0 ){
        tabs.current.children[1].children[0].scrollLeft = 0
    }if (tab === 1 ){
        tabs.current.children[1].children[0].scrollLeft = -50
    }if (tab === 2 ){
        tabs.current.children[1].children[0].scrollLeft = -100
    }if (tab === 3 ){
        tabs.current.children[1].children[0].scrollLeft = -150
    }if (tab === 4 || tab === 5){
        tabs.current.children[1].children[0].scrollLeft = -200
    }
},[tab])

I found this solution for MUI tabs

[yaooocheng]

IMO 从用户体验的角度来看，这仍然是一个问题，因为没有任何指示选项卡可滚动的功能，用户没有可靠的方法来知道屏幕外还有更多选项卡。另一方面，OP 提到的scroll="auto" 所需的额外空间使桌面用户界面看起来很糟糕。这个问题可以重新讨论吗？

看来这仍然是一个问题。现在，我们可以显示或隐藏滚动按钮，但如果我们隐藏滚动按钮，则不会有任何指示符表明有更多按钮或按钮可滚动。我发现有趣的是，Google 地图似乎有不同的选项卡行为，当您单击选项卡时，它会滚动容器以显示更多选项卡： 这是可以在 Tabs 组件中实现的东西吗？这是材料规范的一部分吗？ 编辑添加：以下是 MUI 文档中显示问题的示例：

    [

        ![选项卡2](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)
      ](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)

      [

      ](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)

   [ ![选项卡2](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif) ](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)

    [

        ![选项卡2](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)
      ](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)

      [

      ](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)

   [ ](https://user-images.githubusercontent.com/66479/192387078-bd211d30-09bb-4f2f-9d2f-8cf05b00e9c7.gif)

当您单击最后一个可见选项卡时，它只会将该选项卡滚动到视图中。我必须按住 Shift+鼠标滚轮来滚动容器才能看到有更多选项卡。用户绝对不可能知道要这样做。

常量选项卡 = useRef()

useEffect(()=>{
    if (tab === 0 ){
        tabs.current.children[1].children[0].scrollLeft = 0
    }if (tab === 1 ){
        tabs.current.children[1].children[0].scrollLeft = -50
    }if (tab === 2 ){
        tabs.current.children[1].children[0].scrollLeft = -100
    }if (tab === 3 ){
        tabs.current.children[1].children[0].scrollLeft = -150
    }if (tab === 4 || tab === 5){
        tabs.current.children[1].children[0].scrollLeft = -200
    }
},[tab])

我找到了 MUI 选项卡的解决方案

Why not use scrollIntoView()

[victor-carv]

The arrow button is still visible even though the corresponding items are disabled, as their opacity is set to 0. You can add a CSS that hides the button to fix this issue. Example:

.MuiTabScrollButton-root.Mui-disabled {
  display: none;
}