[Tabs] Tab automatically scrolls to the left on scroll to the right

Using Tabs, if you have one of the selected (Tabs value matches with that specific) Tab to have style with display = none, Tabs scroll to the left upon scroll to the right.

I was originally encountering this issue when I wanted to have no tab selected on load, and have a empty tab with display: none so that they can start clicking on it, as Tabs API will give warnings/errors on console if you have value that doesn’t match with any of the <Tab …> in the children. There was no explanation as to how to have it no tab selected on the Tabs either. The workaround was to have <Tabs … value={false}>, which I found from one of StackOverflow answers, but it is not described on Tabs API page either.

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

Current Behavior 😯

Pressing right scroll button on the Tab scrolls to the right, and then scrolls to the left.

Expected Behavior 🤔

Pressing right scroll button on the Tab scrolls to the right, and stay that way.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-forked-ob22h?file=/demo.js The only thing I have changed from Demo source code is to have display none on the selected tab.

Steps:

1. go to https://codesandbox.io/s/material-demo-forked-ob22h?file=/demo.js
2. click Right scroll button

Context 🔦

Explain how we can have a Tabs with no value selected mode, or explain that selected Tab with display: none will cause unintended behaviors and specify to just have value={false} on Tabs to achieve the same result of having no Tab selected on initial.

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

System:
    OS: macOS 11.4
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.13.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Edge: Not Found
    Firefox: 89.0
    Safari: 14.1.1

[ryank425]

The issue seems to be fixed in v5: https://codesandbox.io/s/material-demo-forked-jozdw?file=/demo.js. Can you confirm?

The exact same thing happens in Chrome, and Firefox.

[sakura90]

@ryank425 See the docs: https://material-ui.com/api/tabs/

The v4 doc describes <Tabs … value={false}> on Tabs API page. What about closing the issue and reopening the issue if you would like to?

@oliviertassinari What about closing the issue?