mwc-tabs don't appear to support scrolling on desktop

[iantrich]

** PLEASE READ THIS BEFORE FILING AN ISSUE **

I'm submitting a:

• bug report
• feature request

What OS are you using?
Windows 10

What browser(s) is this bug affecting:
Chrome Version 77.0.3865.75 (Official Build) (32-bit)

Current behavior:
Unable to scroll through tabs in browser

Expected behavior:
Using a mouse you should be able to scroll through tabs

Steps to reproduce:
https://material-components.github.io/material-components-web-components/demos/tabs.html

If you shrink your desktop browser so that the "Scrolling" example does not display all ten tabs, you'll find that there is no way to scroll through them using your mouse unless you click and use the mouse wheel. On mobile, it works as expected.

Related code:

// insert any relevant code here or add a include a codepen

Other information:

[bramkragten]

Why is this low severity? This makes the tabs pretty much useless on a desktop?

The paper tabs could be dragged by the mouse and had arrows on both sides. This has neither and thus a tab bar with a lot of tabs is not useable.

[ForestKatsch]

Scrolling the tab bars works for me with horizontal touchpad scrolling on macOS 11 and Chrome 87.

[bramkragten]

Yes, it works with normal scroll events, but that is not something a user with a mouse will likely use. They will click and drag the tabs, and that is no longer possible. That is also how it used to work with paper-tabs.

[johnthad]

Additionally I think the tab bar should have indicators to let the user know that there are tabs to the left or right. Depending on the width of the tab-bar and the visible tabs, it may not be obvious that there is any more than what is showing.

[asyncLiz]

Obsolete with M3 once tabs are ready

[Misiu]

@asyncLiz any updates on this?
This is the functionality that we want to use mwc-tabs instead of paper tabs:

tabs.mp4

https://demo.home-assistant.io/

[asyncLiz]

The pre-1.0 beta <mwc-tabs> will not be updated. The current 1.0 <md-tabs> supports scrolling

[Misiu]

Thank you for the update. And what about arrows? When the tabs didn't fit the screen the paper tabs added arrows that allowed users to scroll tabs as seen in video

[asyncLiz]

We don't have plans to add those arrows since it isn't part of the M3 design spec for tabs, but you could add <md-icon-button> arrows absolutely positioned on top of the <md-tabs> to add that feature!