Have the InkBar in the Tabs component honor the value prop (#8010)

mui · Sep 2, 2017 · 2e2140d · 2e2140d
1 parent f39ffd8
commit 2e2140d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/src/Tabs/Tabs.js b/src/Tabs/Tabs.js
@@ -215,9 +215,11 @@ class Tabs extends Component {
       });
     });
 
-    const inkBar = this.state.selectedIndex !== -1 ? (
+    const realSelectedIndex = valueLink.value ? this.getSelectedIndex(this.props) : this.state.selectedIndex;
+
+    const inkBar = realSelectedIndex !== -1 ? (
       <InkBar
-        left={`${width * this.state.selectedIndex}%`}
+        left={`${width * realSelectedIndex}%`}
         width={`${width}%`}
         style={inkBarStyle}
       />

diff --git a/src/Tabs/Tabs.spec.js b/src/Tabs/Tabs.spec.js
@@ -21,6 +21,9 @@ describe('<Tabs />', () => {
       );
 
       assert.strictEqual(wrapper.state().selectedIndex, 0);
+      assert.strictEqual(wrapper.find('Tab').at(0).prop('selected'), true);
+      assert.strictEqual(wrapper.find('Tab').at(1).prop('selected'), false);
+      assert.strictEqual(wrapper.find('InkBar').prop('left'), '0%');
     });
   });
 
@@ -34,6 +37,25 @@ describe('<Tabs />', () => {
       );
 
       assert.strictEqual(wrapper.state().selectedIndex, 1);
+      assert.strictEqual(wrapper.find('Tab').at(0).prop('selected'), false);
+      assert.strictEqual(wrapper.find('Tab').at(1).prop('selected'), true);
+      assert.strictEqual(wrapper.find('InkBar').prop('left'), '50%');
+    });
+
+    it('should still use the value prop even after another tab is selected if value stays the same', () => {
+      const wrapper = shallowWithContext(
+        <Tabs value="2">
+          <Tab value="1" />
+          <Tab value="2" />
+        </Tabs>
+      );
+
+      wrapper.setState({selectedIndex: 0});
+
+      assert.strictEqual(wrapper.state().selectedIndex, 0);
+      assert.strictEqual(wrapper.find('Tab').at(0).prop('selected'), false);
+      assert.strictEqual(wrapper.find('Tab').at(1).prop('selected'), true);
+      assert.strictEqual(wrapper.find('InkBar').prop('left'), '50%');
     });
 
     it('should set the right tab active when the children change', () => {
@@ -52,6 +74,9 @@ describe('<Tabs />', () => {
       });
 
       assert.strictEqual(wrapper.state().selectedIndex, 0);
+      assert.strictEqual(wrapper.find('Tab').at(0).prop('selected'), true);
+      assert.strictEqual(wrapper.find('Tab').at(1).prop('selected'), false);
+      assert.strictEqual(wrapper.find('InkBar').prop('left'), '0%');
     });
   });
 });