fix(AdaptiveTabs): fix calc of tabs width (#232)

gravity-ui · Oct 23, 2024 · 111b0d5 · 111b0d5
1 parent a728e0f
commit 111b0d5
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.tsx b/src/components/AdaptiveTabs/AdaptiveTabs.tsx
@@ -389,6 +389,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
     /*
         Recalculating the Layout - Phases 1 and 2
      */
+    // eslint-disable-next-line complexity
     recalculateTabs = () => {
         if (!this.tabsRootNode.current) {
             return;
@@ -436,7 +437,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
          of the switcher width will not exceed the width of the container */
         for (let i = 0; i < this.tabsWidth.length; i++) {
             renderedTabsSumWidth = renderedTabsSumWidth + this.tabsWidth[i];
-            const switcherWidthCorrection = i >= items.length - 1 ? 0 : this.switcherWidth;
+            const switcherWidthCorrection = i === items.length - 1 ? 0 : this.switcherWidth;
             const isOverflown = renderedTabsSumWidth + switcherWidthCorrection > tabsRootNodeWidth;
 
             if (firstHiddenTabIndexForSequentialCase === null && isOverflown) {
@@ -456,6 +457,10 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
             }
         }
 
+        if (tabChosenFromSelectIndex > -1) {
+            maxHiddenTabWidth = this.tabsWidth[tabChosenFromSelectIndex];
+        }
+
         if (maxHiddenTabWidth && typeof firstHiddenTabIndexForSequentialCase === 'number') {
             let rightSpace = maxHiddenTabWidth - emptySpace;
 
@@ -465,10 +470,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
             firstHiddenTabIndex = firstHiddenTabIndexForSequentialCase;
 
             for (let j = firstHiddenTabIndexForSequentialCase - 1; j >= 0; j--) {
-                // We need to use maxHiddenTabWidth instead of tabWidth[i],
-                // beacause the tab, that we are going to render at index j
-                // may be active tab, which can be wider than real tab at index j
-                rightSpace = rightSpace - maxHiddenTabWidth;
+                rightSpace = rightSpace - this.tabsWidth[j];
 
                 if (rightSpace < 0) {
                     firstHiddenTabIndex = j + (tabChosenFromSelectIndex > j ? 0 : 1);
@@ -507,6 +509,10 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
 
         this.setState({firstHiddenTabIndex});
 
+        if (firstHiddenTabIndex > tabChosenFromSelectIndex) {
+            this.setState({tabChosenFromSelectId: null});
+        }
+
         /*phase 1 is complete, call the method of adjusting the width of the overflowing tabs to fill the entire width of the container*/
         this.setUpOverflownTabs(firstHiddenTabIndex, activeTabIndex, tabsRootNodeWidth);
 
@@ -845,7 +851,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
 
         const maxWidth =
             dimensionsWereCollected && typeof this.overflownTabsCurrentWidth[tabIndex] === 'number'
-                ? this.overflownTabsCurrentWidth[tabIndex] - this.tabItemPaddingRight
+                ? this.overflownTabsCurrentWidth[tabIndex] + this.tabItemPaddingRight
                 : `${this.tabMaxWidthInPercentsForScreenSize[currentContainerWidthName!]}%`;
 
         const tabNode = <Tab {...item} active={item.id === activeTabID} />;