[Tabs] Increment scroll of the minimum amount possible (#33103)

mui · Jun 14, 2022 · 17a8d5f · 17a8d5f
1 parent f0f8acc
commit 17a8d5f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 18 deletions.
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
@@ -443,31 +443,19 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
     scroll(scrollValue);
   };
 
-  const getFirstVisibleTab = (tabs) => {
-    const containerSize = tabsRef.current[clientSize];
-    const containerStartBound = Math.round(tabsRef.current[scrollStart]);
-    const containerEndBound = Math.round(containerStartBound + containerSize);
-
-    const offset = vertical ? 'offsetTop' : 'offsetLeft';
-    return tabs.find((tab) => {
-      const centerPoint = tab[offset] + tab[clientSize] / 2;
-      return centerPoint >= containerStartBound && centerPoint <= containerEndBound;
-    });
-  };
-
   const getScrollSize = () => {
     const containerSize = tabsRef.current[clientSize];
     let totalSize = 0;
     const children = Array.from(tabListRef.current.children);
-    const firstVisibleTab = getFirstVisibleTab(children);
-
-    if (firstVisibleTab && firstVisibleTab[clientSize] > containerSize) {
-      return firstVisibleTab[clientSize];
-    }
 
     for (let i = 0; i < children.length; i += 1) {
       const tab = children[i];
       if (totalSize + tab[clientSize] > containerSize) {
+        // If the first item is longer than the container size, then only scroll
+        // by the container size.
+        if (i === 0) {
+          totalSize = containerSize;
+        }
         break;
       }
       totalSize += tab[clientSize];

diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -712,7 +712,7 @@ describe('<Tabs />', () => {
       tablistContainer.scrollLeft = 0;
       fireEvent.click(findScrollButton(container, 'right'));
       clock.tick(1000);
-      expect(tablistContainer.scrollLeft).equal(220);
+      expect(tablistContainer.scrollLeft).equal(200);
     });
 
     it('should vertically scroll by width of partially visible item', () => {