diff --git a/docs/examples/TabbedAreaControlled.js b/docs/examples/TabbedAreaControlled.js
index 82bf84f400..690bf09f63 100644
--- a/docs/examples/TabbedAreaControlled.js
+++ b/docs/examples/TabbedAreaControlled.js
@@ -15,6 +15,7 @@ const ControlledTabArea = React.createClass({
TabPane 1 content
TabPane 2 content
+ TabPane 3 content
);
}
diff --git a/docs/examples/TabbedAreaNoAnimation.js b/docs/examples/TabbedAreaNoAnimation.js
index e4d4b7a323..2b9067632a 100644
--- a/docs/examples/TabbedAreaNoAnimation.js
+++ b/docs/examples/TabbedAreaNoAnimation.js
@@ -2,6 +2,7 @@ const tabbedAreaInstance = (
TabPane 1 content
TabPane 2 content
+ TabPane 3 content
);
diff --git a/docs/examples/TabbedAreaUncontrolled.js b/docs/examples/TabbedAreaUncontrolled.js
index c22c7ad9c5..90af3efcc3 100644
--- a/docs/examples/TabbedAreaUncontrolled.js
+++ b/docs/examples/TabbedAreaUncontrolled.js
@@ -2,6 +2,7 @@ const tabbedAreaInstance = (
TabPane 1 content
TabPane 2 content
+ TabPane 3 content
);
diff --git a/src/TabPane.js b/src/TabPane.js
index ed3d59a1e1..bd41a6cf9e 100644
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -6,7 +6,8 @@ const TabPane = React.createClass({
propTypes: {
active: React.PropTypes.bool,
animation: React.PropTypes.bool,
- onAnimateOutEnd: React.PropTypes.func
+ onAnimateOutEnd: React.PropTypes.func,
+ disabled: React.PropTypes.bool
},
getDefaultProps() {
diff --git a/src/TabbedArea.js b/src/TabbedArea.js
index 646a917bc9..c49f236238 100644
--- a/src/TabbedArea.js
+++ b/src/TabbedArea.js
@@ -105,12 +105,13 @@ const TabbedArea = React.createClass({
},
renderTab(child) {
- let {eventKey, className, tab } = child.props;
+ let {eventKey, className, tab, disabled } = child.props;
return (
+ className={className}
+ disabled={disabled}>
{tab}
);
diff --git a/test/TabbedAreaSpec.js b/test/TabbedAreaSpec.js
index 2d4e60e3d1..dd10d29f32 100644
--- a/test/TabbedAreaSpec.js
+++ b/test/TabbedAreaSpec.js
@@ -197,5 +197,37 @@ describe('TabbedArea', function () {
assert.equal(tabPane[1].getDOMNode().getAttribute('class').match(/pull-right/)[0], 'pull-right');
});
+ it('Should pass disabled to NavItem', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ Tab 1 content
+ Tab 2 content
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'disabled'));
+ });
+
+ it('Should not show content when clicking disabled tab', function () {
+ let tab1 = Tab 1;
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ Tab 1 content
+ Tab 2 content
+
+ );
+
+ let tabbedArea = ReactTestUtils.findRenderedComponentWithType(instance, TabbedArea);
+ let panes = ReactTestUtils.scryRenderedComponentsWithType(instance, TabPane);
+
+ ReactTestUtils.Simulate.click(
+ ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'tab1')
+ );
+
+ assert.equal(panes[0].props.active, false);
+ assert.equal(panes[1].props.active, true);
+ assert.equal(tabbedArea.refs.tabs.props.activeKey, 2);
+ });
+
});