Fix handling the index when removing the last tab

Author: danez

examples/dyno/app.js

@@ -51,7 +51,7 @@ class App extends React.Component {
   removeTab = (index) => {
     this.setState({
       tabs: this.state.tabs.filter((tab, i) => i !== index),
-      selectedIndex: this.state.selectedIndex - 1,
+      selectedIndex: Math.max(this.state.selectedIndex - 1, 0),
     });
   }
 

src/components/Tabs.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { childrenPropType, onSelectPropType, selectedIndexPropType } from '../helpers/propTypes';
 import UncontrolledTabs from './UncontrolledTabs';
+import { getTabsCount } from '../helpers/count';
 
 export default class Tabs extends Component {
 
@@ -59,12 +60,20 @@ export default class Tabs extends Component {
     }
   }
 
-  // This is an anti-pattern, so sue me
+  // preserve the existing selectedIndex from state.
+  // If the state has not selectedIndex, default to the defaultIndex or 0
   static copyPropsToState(props, state) {
-    // preserve the existing selectedIndex from state.
-    // If the state has not selectedIndex, default to the defaultIndex or 0
+    const maxTabIndex = getTabsCount(props.children) - 1;
+    let selectedIndex = null;
+
+    if (state.selectedIndex != null) {
+      selectedIndex = Math.min(state.selectedIndex, maxTabIndex);
+    } else {
+      selectedIndex = props.defaultIndex || 0;
+    }
+
     return {
-      selectedIndex: state.selectedIndex || props.defaultIndex || 0,
+      selectedIndex,
       focus: state.focus || props.defaultFocus,
     };
   }

src/components/UncontrolledTabs.js

@@ -6,6 +6,7 @@ import { childrenPropType } from '../helpers/propTypes';
 import Tab from './Tab';
 import TabList from './TabList';
 import TabPanel from './TabPanel';
+import { getPanelsCount, getTabsCount } from '../helpers/count';
 
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
@@ -90,21 +91,11 @@ export default class UncontrolledTabs extends Component {
   }
 
   getTabsCount() {
-    const tabLists = React.Children.toArray(this.props.children).filter(x => x.type === TabList);
-
-    if (tabLists[0] && tabLists[0].props.children) {
-      return React.Children.count(
-        React.Children.toArray(tabLists[0].props.children).filter(x => x.type === Tab),
-      );
-    }
-
-    return 0;
+    return getTabsCount(this.props.children);
   }
 
   getPanelsCount() {
-    return React.Children.count(
-      React.Children.toArray(this.props.children).filter(x => x.type === TabPanel),
-    );
+    return getPanelsCount(this.props.children);
   }
 
   getTab(index) {

src/helpers/count.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import TabList from '../components/TabList';
+import Tab from '../components/Tab';
+import TabPanel from '../components/TabPanel';
+
+export function getTabsCount(children) {
+  const tabLists = React.Children.toArray(children).filter(x => x.type === TabList);
+
+  if (tabLists[0] && tabLists[0].props.children) {
+    return React.Children.count(
+      React.Children.toArray(tabLists[0].props.children).filter(x => x.type === Tab),
+    );
+  }
+
+  return 0;
+}
+
+export function getPanelsCount(children) {
+  return React.Children.count(
+    React.Children.toArray(children).filter(x => x.type === TabPanel),
+  );
+}