[Tabs] Fix consecutive updates (#8831)

package.json

@@ -183,7 +183,7 @@
   "size-limit": [
     {
       "path": "build/index.js",
-      "limit": "93 KB"
+      "limit": "94 KB"
     }
   ],
   "nyc": {

pages/api/tabs.md

@@ -6,7 +6,7 @@ filename: /src/Tabs/Tabs.js
 
 # Tabs
 
-Notice that this Component is incompatible with server side rendering.
+
 
 ## Props
 

src/Tabs/Tabs.js

@@ -144,9 +144,6 @@ export type TabsMeta = {
   right: number,
 };
 
-/**
- * Notice that this Component is incompatible with server side rendering.
- */
 class Tabs extends React.Component<ProvidedProps & Props, State> {
   static defaultProps = {
     centered: false,
@@ -180,10 +177,13 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
 
   componentDidUpdate(prevProps, prevState) {
     this.updateScrollButtonState();
+
+    // The index might have changed at the same time.
+    // We need to check again the right indicator position.
+    this.updateIndicatorState(this.props);
+
     if (this.state.indicatorStyle !== prevState.indicatorStyle) {
       this.scrollSelectedIntoView();
-    } else {
-      this.updateIndicatorState(this.props);
     }
   }
 
@@ -335,8 +335,10 @@ class Tabs extends React.Component<ProvidedProps & Props, State> {
     };
 
     if (
-      indicatorStyle.left !== this.state.indicatorStyle.left ||
-      indicatorStyle.width !== this.state.indicatorStyle.width
+      (indicatorStyle.left !== this.state.indicatorStyle.left ||
+        indicatorStyle.width !== this.state.indicatorStyle.width) &&
+      !Number.isNaN(indicatorStyle.left) &&
+      !Number.isNaN(indicatorStyle.width)
     ) {
       this.setState({ indicatorStyle });
     }

src/Tabs/Tabs.spec.js

@@ -4,13 +4,15 @@ import React from 'react';
 import { assert } from 'chai';
 import { spy, stub, useFakeTimers } from 'sinon';
 import scroll from 'scroll';
-import { createShallow, createMount, getClasses } from '../test-utils';
+import { createShallow, createMount, getClasses, unwrap } from '../test-utils';
 import consoleErrorMock from '../../test/utils/consoleErrorMock';
 import Tabs from './Tabs';
 import TabScrollButton from './TabScrollButton';
 import TabIndicator from './TabIndicator';
 import Tab from './Tab';
 
+const TabsNaked = unwrap(Tabs);
+
 const noop = () => {};
 const fakeTabs = {
   getBoundingClientRect: () => ({}),
@@ -207,6 +209,33 @@ describe('<Tabs />', () => {
         );
         assert.strictEqual(wrapper2.find(TabIndicator).length, 1);
       });
+
+      it('should update the indicator state no matter what', () => {
+        const wrapper2 = mount(
+          <TabsNaked width="md" onChange={noop} value={1} classes={{}} theme={{}}>
+            <Tab />
+            <Tab />
+          </TabsNaked>,
+        );
+        const instance = wrapper2.instance();
+        stub(instance, 'scrollSelectedIntoView');
+
+        wrapper2.setState({
+          indicatorStyle: {
+            left: 10,
+            width: 40,
+          },
+        });
+        wrapper2.setProps({
+          value: 0,
+        });
+
+        assert.strictEqual(
+          instance.scrollSelectedIntoView.callCount >= 2,
+          true,
+          'should have called scrollSelectedIntoView',
+        );
+      });
     });
 
     it('should warn when the value is invalid', () => {