[Tabs] Fix issue where scrollable tabs auto move to selected tab

[wereHamster]

Fixes #10826

The diff is based on the suggestion by @oliviertassinari, though the Tabs code has changed somewhat in the meantime (due to the change to use React hooks and the addition of vertical Tabs).

The original issue was reported against Firefox, but I was able to reproduce it on Edge as well. I currently don't have access to Edge, but can test it later.

Is it possible to write a test for something like that?

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes.

Comparing: f2dbeca...6563fd0

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	0.00%	+0.01% 🔺	328,809	328,822	89,882	89,894
@material-ui/core/Paper	0.00%	0.00%	68,684	68,684	20,473	20,473
@material-ui/core/Paper.esm	0.00%	0.00%	62,058	62,058	19,205	19,205
@material-ui/core/Popper	0.00%	0.00%	28,468	28,468	10,177	10,177
@material-ui/core/Textarea	0.00%	0.00%	5,094	5,094	2,136	2,136
@material-ui/core/TrapFocus	0.00%	0.00%	3,834	3,834	1,614	1,614
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,386	16,386	5,826	5,826
@material-ui/core/useMediaQuery	0.00%	0.00%	2,541	2,541	1,059	1,059
@material-ui/lab	0.00%	0.00%	152,113	152,113	46,381	46,381
@material-ui/styles	0.00%	0.00%	51,401	51,401	15,289	15,289
@material-ui/system	0.00%	0.00%	15,658	15,658	4,361	4,361
Button	0.00%	0.00%	78,687	78,687	24,041	24,041
Modal	0.00%	0.00%	14,346	14,346	5,009	5,009
Portal	0.00%	0.00%	2,907	2,907	1,318	1,318
Rating	0.00%	0.00%	70,047	70,047	21,878	21,878
Slider	0.00%	0.00%	74,338	74,338	23,041	23,041
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	51,846	51,846	13,780	13,780
docs.main	0.00%	0.00%	590,557	590,557	188,449	188,449
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	+0.02% 🔺	299,808	299,821	86,238	86,253

Generated by 🚫 dangerJS against 6563fd0

[wereHamster]

FYI I ran yarn prettier but didn't notice that it failed:

$ yarn node ./scripts/prettier.js
{ RangeError [ERR_CHILD_PROCESS_STDIO_MAXBUFFER]: stdout maxBuffer length exceeded
    at Socket.onChildStdout (child_process.js:354:14)
    at Socket.emit (events.js:198:13)
    at addChunk (_stream_readable.js:288:12)
    at readableAddChunk (_stream_readable.js:265:13)
    at Socket.Readable.push (_stream_readable.js:224:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:94:17)
  cmd:
   'git diff --name-only f8f787abd296a57ec15f1e2ea311b3e08318fef7',
  stdout:
   '.browserslist [snip a really long string consisting of newline-delimited file names]

[oliviertassinari]

@wereHamster Well done, thanks for taking care of the issue!