Fix nested Tabs (Issue reactjs#54)

Author: themattliberty

lib/components/Tabs.js

@@ -5,11 +5,6 @@ import jss from 'js-stylesheet';
 import uuid from '../helpers/uuid';
 import childrenPropType from '../helpers/childrenPropType';
 
-// Determine if a node from event.target is a Tab element
-function isTabNode(node) {
- return node.nodeName === 'LI' && node.getAttribute('role') === 'tab';
-}
-
 // Determine if a tab node is disabled
 function isTabDisabled(node) {
  return node.getAttribute('aria-disabled') === 'true';
@@ -70,7 +65,7 @@ module.exports = React.createClass({
  handleClick(e) {
  let node = e.target;
  do {
- if (isTabNode(node)) {
+ if (this.isTabNode(node)) {
  if (isTabDisabled(node)) {
  return;
  }
@@ -83,7 +78,7 @@ module.exports = React.createClass({
  },
 
  handleKeyDown(e) {
- if (isTabNode(e.target)) {
+ if (this.isTabNode(e.target)) {
  let index = this.state.selectedIndex;
  let preventDefault = false;
 
@@ -311,6 +306,11 @@ module.exports = React.createClass({
  );
  },
 
+ // Determine if a node from event.target is a Tab element
+ isTabNode(node) {
+ return node.nodeName === 'LI' && node.getAttribute('role') === 'tab' && node.parentElement.parentElement === findDOMNode(this);
+ },
+
  // This is an anti-pattern, so sue me
  copyPropsToState(props) {
  let selectedIndex = props.selectedIndex;