[Tabs] Scrollable tabs in Firefox auto move to selected tab

[Jordy-A]

Current Behavior

When using the scrollable tabs in Firefox, when I select the first tab, and then click on the arrow to move to the right, it automatically returns to the first (selected) tab.

Expected Behavior

I can't select tab eight, without clicking the fourth tab first, and then clicking the arrow to move to tab eight.

Steps to Reproduce (for bugs)

Using Firefox (I used v59), go to scrollable tabs and click the arrow on the right.

Environment

Tech	Version
Material-UI	1.0.0-beta.38
React	16.2.0
Firefox	59.0.1

[oliviertassinari]

@Jordy-A I can't reproduce the issue on Firefox 59.0.2. Do you have another reproduction example?

[synchronos-t]

This seems to have resurfaced somehow on 4.0.0. I can reproduce it with this demo (on Windows 10 @ 200% DPI, at least) on the Firefox 67 and 68: https://codesandbox.io/s/quizzical-ramanujan-sivhb

The zoom needs to be exactly 100%.

In the DOM (both actual and virtual), I see the TabIndicator flash with the left: 1 (probably when the scroll goes to the right edge) and then immediately reverting back to left: 0 (probably when it comes back to the left edge).

Shall I create a new issue?

[oliviertassinari]

@synchronos-t Thank you for the report, I can reproduce the problem. What do you think of this fix?

diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index 9dfd56a71..5a419cd66 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -285,21 +285,24 @@ class Tabs extends React.Component {
         theme.direction === 'rtl'
           ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth
           : tabsMeta.scrollLeft;
-      left = Math.round(tabMeta.left - tabsMeta.left + correction);
+      left = tabMeta.left - tabsMeta.left + correction;
     }

     const indicatorStyle = {
       left,
       // May be wrong until the font is loaded.
-      width: tabMeta ? Math.round(tabMeta.width) : 0,
+      width: tabMeta ? tabMeta.width : 0,
     };

-    if (
-      (indicatorStyle.left !== this.state.indicatorStyle.left ||
-        indicatorStyle.width !== this.state.indicatorStyle.width) &&
-      !isNaN(indicatorStyle.left) &&
-      !isNaN(indicatorStyle.width)
-    ) {
+    // Seed the initial state
+    if (isNaN(this.state.indicatorStyle.left) || isNaN(this.state.indicatorStyle.width)) {
+      this.setState({ indicatorStyle });
+    }
+
+    const dLeft = Math.abs(indicatorStyle.left - this.state.indicatorStyle.left);
+    const dWidth = Math.abs(indicatorStyle.width - this.state.indicatorStyle.width);
+
+    if (dLeft >= 1 || dWidth >= 1) {
       this.setState({ indicatorStyle });
     }
   }

Instead of using a Math.round, I'm proposing to compare the raw values and to ensure the difference is below, strictly, 1px.

Do you want to submit a pull request? :)

[Mood-al]

Hey guys I have a similar issue but it's so weird one.
My issue is when i set the scrollable tabs on RTL mode the scroll stops working on chrome and on any chromium core browsers
the weird thing is on some windows devices it works just fine and on others it doesnt work
i have tested it on 5 devices 3 of them the tabs scroll worked fine and on my device and on another one it didnt
on mac it worked on all devices but the issue is just on windows 10 devices
this is my example i used mui v5 and next js but it's the same with all material versions
https://mui-v5-rtl-tabs.vercel.app

screencast-codesandbox.io-2021.12.28-14_46_11.mp4

and here is its codesandbox example code
https://codesandbox.io/s/stupefied-borg-7u66f

does anyone have any thoughts about that

[Mood-al]

Hey again guys I have noticed that if i sat my Page Zoom to 110% and then refresh the page the tabs work fine on RTL mode
like this video

screencast-nimbus-capture-2021.12.31-02_55_16.mp4