fix: Ensure that initial selected index never goes below 0

reactjs · Mar 9, 2021 · ba1c5f8 · ba1c5f8
1 parent 5da2a7b
commit ba1c5f8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/components/Tabs.js b/src/components/Tabs.js
@@ -99,7 +99,7 @@ For more information about controlled and uncontrolled mode of react-tabs see th
     };
 
     if (newState.mode === MODE_UNCONTROLLED) {
-      const maxTabIndex = getTabsCount(props.children) - 1;
+      const maxTabIndex = Math.max(0, getTabsCount(props.children) - 1);
       let selectedIndex = null;
 
       if (state.selectedIndex != null) {

diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js
@@ -541,4 +541,21 @@ describe('<Tabs />', () => {
     expect(firstTab).toHaveFocus();
     assertTabSelected(1);
   });
+
+  test('should render first tab once tabs are available', () => {
+    const { rerender } = render(<Tabs></Tabs>);
+
+    rerender(
+      <Tabs>
+        <TabList>
+          <Tab data-testid="tab1">Tab1</Tab>
+          <Tab data-testid="tab2">Tab2</Tab>
+        </TabList>
+        <TabPanel data-testid="panel1">Hello Tab1</TabPanel>
+        <TabPanel data-testid="panel2">Hello Tab2</TabPanel>
+      </Tabs>,
+    );
+
+    assertTabSelected(1);
+  });
 });