fix(AdaptiveTabs): fix border-case with incorrect firstHiddenTabIndex (…

…#151)

src/components/AdaptiveTabs/AdaptiveTabs.tsx

@@ -343,7 +343,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
 
             if (tabTextNode.scrollWidth > tabTextNode.clientWidth) {
                 // when overflow and "..." exists
-                const widthCorrector = i === tabs.length - 1 ? 0 : this.tabItemPaddingRight;
+                const widthCorrector = this.tabItemPaddingRight;
                 this.overflownTabsRealWidth[i] = tabTextNode.scrollWidth + widthCorrector;
                 this.tabsRealWidth[i] = this.overflownTabsRealWidth[i];
             } else {
@@ -456,11 +456,19 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
             }
         }
 
-        if (maxHiddenTabWidth) {
+        if (maxHiddenTabWidth && typeof firstHiddenTabIndexForSequentialCase === 'number') {
             let rightSpace = maxHiddenTabWidth - emptySpace;
 
-            for (let j = firstHiddenTabIndexForSequentialCase! - 1; j >= 0; j--) {
-                rightSpace = rightSpace - this.tabsWidth[j];
+            // If firstHiddenTabIndexForSequentialCase exists, then we should
+            // start firstHiddenTabIndex from firstHiddenTabIndexForSequentialCase,
+            // reducing it until everything is correct
+            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;
 
                 if (rightSpace < 0) {
                     firstHiddenTabIndex = j + (tabChosenFromSelectIndex > j ? 0 : 1);
@@ -832,11 +840,13 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
         const isLastTab = item.id === items[items.length - 1].id && tabIndex === items.length - 1;
         const noOverflow =
             needSetMaxWidth &&
-            this.overflownTabsRealWidth[tabIndex] === this.overflownTabsCurrentWidth[tabIndex];
+            this.overflownTabsRealWidth[tabIndex] ===
+                this.overflownTabsCurrentWidth[tabIndex] + this.tabItemPaddingRight;
 
-        const maxWidth = dimensionsWereCollected
-            ? this.overflownTabsCurrentWidth[tabIndex]
-            : `${this.tabMaxWidthInPercentsForScreenSize[currentContainerWidthName!]}%`;
+        const maxWidth =
+            dimensionsWereCollected && typeof this.overflownTabsCurrentWidth[tabIndex] === 'number'
+                ? this.overflownTabsCurrentWidth[tabIndex] - this.tabItemPaddingRight
+                : `${this.tabMaxWidthInPercentsForScreenSize[currentContainerWidthName!]}%`;
 
         const tabNode = <Tab {...item} active={item.id === activeTabID} />;
 
@@ -935,7 +945,8 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
                     [className],
                 )}
             >
-                {this.state.currentContainerWidthName === SMALL_CONTAINER_WIDTH_NAME &&
+                {(this.state.currentContainerWidthName === SMALL_CONTAINER_WIDTH_NAME ||
+                    this.state.firstHiddenTabIndex === 0) &&
                 items.length > 1 ? (
                     this.renderTabsAsSelect()
                 ) : (