material-ui: [Tabs] Scroll buttons are not displayed if scrollButtons="auto" and on mobile

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When scrollButtons="auto" it never shows the scroll buttons even when tabs are not fully visible within Mobile View. The description of this prop says it should display the buttons whenever tabs are cut off.

From Tabs API

Determine behavior of scroll buttons when tabs are set to scroll:

auto will only present them when not all the items are visible. - desktop will only present them on medium and larger viewports. - on will always present them. - off will never present them.

Expected Behavior 🤔

Scroll buttons should display in mobile view if tabs are not fully visible.

Steps to Reproduce 🕹

You can see the behavior in this Codesandbox: https://codesandbox.io/s/material-demo-forked-gdrfp?file=/demo.js taken from https://github.com/mui-org/material-ui/issues/22592.

Context 🔦

We have a subnavbar with scrollable tabs, we want the buttons to not appear (no left/right padding) in desktop since there’s enough space to view all the tabs, but in mobile view, we want the scroll buttons to appear to signal to the user that there are additional items to see by scrolling right. We believe this is what the auto setting is supposed to achieve with scrollButtons prop.

Your Environment 🌎

Tech	Version
Material-UI	^4.9.5

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (12 by maintainers)

Most upvoted comments

I had similar issue in mobile mode with MUI v5.0.2 It will be working if you add allowScrollButtonsMobile to your <Tabs> component props

alimorshedzadeh on May 23, 2022

@mnajdova I couldn’t remember, we did that 1 year ago, I have blamed the line to learn more about it. The logic comes from #15676, which links back to https://github.com/mui-org/material-ui/issues/15324#issuecomment-485774808. The current default behavior seems correct. It seems to be so we match the specification that never displays the buttons on mobile: https://material.io/components/tabs#anatomy.

On desktop, provide a visual indicator that more tabs are available off screen.

However, we can probably improve the DX, change the API. It seems that there are different dimensions:

Some might want the scroll buttons to lazily use space: #12358
Some might not want to display the scroll buttons, ever, on touch pointer devices: the Material Design spec.
Some might want to force the display of the scroll buttons, to be always visible (and add an opacity): #22181.

oliviertassinari on Sep 15, 2020

Can I work on a PR for this? 😃

brorlarsnicklas on Sep 21, 2020