material-web
material-web copied to clipboard
material-components
mwc-tabs don't appear to support scrolling on desktop
** PLEASE READ THIS BEFORE FILING AN ISSUE **
I'm submitting a:
- [x] 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:
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.
Scrolling the tab bars works for me with horizontal touchpad scrolling on macOS 11 and Chrome 87.
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.
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.
