fix(TabBar): activeTabIndex doesn't set active tab of 0 on load #94

rmwc · Jan 12, 2018 · efdc130 · efdc130
1 parent 3fd737d
commit efdc130
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/src/Tabs/index.js b/src/Tabs/index.js
@@ -115,14 +115,13 @@ export const TabBar: React.ComponentType<TabBarPropsT> = withMDC({
     onChange: noop,
     activeTabIndex: 0
   },
-
   onUpdate: (props, nextProps, api, inst) => {
     if (!api) return;
 
     if (!props || nextProps.activeTabIndex !== props.activeTabIndex) {
-      api.activeTabIndex = api.tabs[nextProps.activeTabIndex] ?
-        nextProps.activeTabIndex :
-        0;
+      api.activeTabIndex = api.tabs[Number(nextProps.activeTabIndex)] ?
+        nextProps.activeTabIndex + '' :
+        undefined;
     }
   },
   didUpdate: (props, nextProps, api, inst) => {

diff --git a/src/Tabs/tabs.md b/src/Tabs/tabs.md
@@ -9,7 +9,7 @@ import from **rmwc/Tabs**
 import { TabBar, Tab, TabIcon, TabIconText, TabBarScroller } from 'rmwc/Tabs';
 
 <TabBar
-  activeTabIndex={this.state.activeTabIndex || 0}
+  activeTabIndex={this.state.activeTabIndex}
   onChange={evt => this.setState({'activeTabIndex': evt.target.value})}
 >
   <Tab>Cookies</Tab>
@@ -18,7 +18,7 @@ import { TabBar, Tab, TabIcon, TabIconText, TabBarScroller } from 'rmwc/Tabs';
 </TabBar>
 
 <TabBar
-  activeTabIndex={this.state.activeTabIndex2 || 0}
+  activeTabIndex={this.state.activeTabIndex2}
   onChange={evt => this.setState({'activeTabIndex2': evt.target.value})}
 >
   <Tab><TabIcon>star_border</TabIcon></Tab>
@@ -27,7 +27,7 @@ import { TabBar, Tab, TabIcon, TabIconText, TabBarScroller } from 'rmwc/Tabs';
 </TabBar>
 
 <TabBar
-  activeTabIndex={this.state.activeTabIndex3 || 0}
+  activeTabIndex={this.state.activeTabIndex3}
   onChange={evt => this.setState({'activeTabIndex3': evt.target.value})}
 >
   <Tab><TabIcon>star_border</TabIcon><TabIconText>Featured</TabIconText></Tab>
@@ -38,7 +38,7 @@ import { TabBar, Tab, TabIcon, TabIconText, TabBarScroller } from 'rmwc/Tabs';
 {/* TabBar wrapped in TabBarScroller */}
 <TabBarScroller>
   <TabBar
-    activeTabIndex={this.state.activeTabIndex4 || 0}
+    activeTabIndex={this.state.activeTabIndex4}
     onChange={evt => this.setState({'activeTabIndex4': evt.target.value})}
   >
     <Tab>Cookies</Tab>

diff --git a/src/Tabs/tabs.spec.js b/src/Tabs/tabs.spec.js
@@ -22,13 +22,39 @@ describe('Tabs', () => {
     ).toEqual(true);
   });
 
+  it('can have no tabs', () => {
+    mount(<TabBar activeTabIndex={0} onChange={evt => {}} />);
+  });
+
   it('can have custom classnames', () => {
     [TabBar, Tab].forEach(Component => {
       const el = mount(<Component className={'my-custom-classname'} />);
       expect(!!~el.html().search('my-custom-classname')).toEqual(true);
     });
   });
 
+  it('sets initial active tab', done => {
+    const el1 = mount(
+      <TabBar activeTabIndex={0} onChange={evt => {}}>
+        <Tab>1</Tab>
+        <Tab>2</Tab>
+      </TabBar>
+    );
+
+    const el2 = mount(
+      <TabBar activeTabIndex={1} onChange={evt => {}}>
+        <Tab>1</Tab>
+        <Tab>2</Tab>
+      </TabBar>
+    );
+    // set a timeout because the child tabs render async
+    setTimeout(() => {
+      expect(!!~el1.html().search('mdc-tab--active')).toEqual(true);
+      expect(!!~el2.html().search('mdc-tab--active')).toEqual(true);
+      done();
+    });
+  });
+
   it('TabBarScroller renders', () => {
     mount(
       <TabBarScroller>