From 20ba8a590cd6fc56ddb532a71bb691a841f02cfe Mon Sep 17 00:00:00 2001
From: Robert Messerle <rmesserle@google.com>
Date: Fri, 13 Nov 2015 14:47:45 -0800
Subject: [PATCH] fix(tabs): resolves issue with nested tabs

Fixes #4989. Closes #5719.
---
 src/components/tabs/js/tabDirective.js | 16 ++++++++++++----
 src/components/tabs/tabs.spec.js       | 21 +++++++++++++++++++++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/tabs/js/tabDirective.js b/src/components/tabs/js/tabDirective.js
index 60b024b0e80..b4f561b5a4a 100644
--- a/src/components/tabs/js/tabDirective.js
+++ b/src/components/tabs/js/tabDirective.js
@@ -58,8 +58,8 @@ function MdTab () {
     require:  '^?mdTabs',
     terminal: true,
     compile:  function (element, attr) {
-      var label = element.find('md-tab-label'),
-          body  = element.find('md-tab-body');
+      var label = firstChild(element, 'md-tab-label'),
+          body  = firstChild(element, 'md-tab-body');
 
       if (label.length == 0) {
         label = angular.element('<md-tab-label></md-tab-label>');
@@ -88,8 +88,8 @@ function MdTab () {
   function postLink (scope, element, attr, ctrl) {
     if (!ctrl) return;
     var index = ctrl.getTabElementIndex(element),
-        body  = element.find('md-tab-body').eq(0).remove(),
-        label = element.find('md-tab-label').eq(0).remove(),
+        body  = firstChild(element, 'md-tab-body').remove(),
+        label = firstChild(element, 'md-tab-label').remove(),
         data  = ctrl.insertTab({
           scope:    scope,
           parent:   scope.$parent,
@@ -114,6 +114,14 @@ function MdTab () {
         }
     );
     scope.$on('$destroy', function () { ctrl.removeTab(data); });
+  }
 
+  function firstChild (element, tagName) {
+    var children = element[0].children;
+    for (var i = 0, len = children.length; i < len; i++) {
+      var child = children[i];
+      if (child.tagName === tagName.toUpperCase()) return angular.element(child);
+    }
+    return angular.element();
   }
 }
diff --git a/src/components/tabs/tabs.spec.js b/src/components/tabs/tabs.spec.js
index 17afc2f0d2b..d52556f0b6d 100644
--- a/src/components/tabs/tabs.spec.js
+++ b/src/components/tabs/tabs.spec.js
@@ -336,4 +336,25 @@ describe('<md-tabs>', function () {
       expect(element.find('md-tabs-content-wrapper').hasClass('ng-hide')).toBe(true);
     }));
   });
+
+  describe('nested tabs', function () {
+    it('should properly nest tabs', inject(function () {
+      var template = '' +
+          '<md-tabs>' +
+          ' <md-tab label="one">' +
+          '   <md-tabs>' +
+          '     <md-tab><md-tab-label>a</md-tab-label></md-tab>' +
+          '     <md-tab><md-tab-label>b</md-tab-label></md-tab>' +
+          '     <md-tab><md-tab-label>c</md-tab-label></md-tab>' +
+          '   </md-tabs>' +
+          ' </md-tab>' +
+          ' <md-tab label="two">two</md-tab>' +
+          '</md-tabs>';
+      var element = setup(template);
+      // first item should be 'one'
+      expect(element.find('md-tab-item').eq(0).text()).toBe('one');
+      // first item in nested tabs should be 'a'
+      expect(element.find('md-tabs').find('md-tab-item').eq(0).text()).toBe('a');
+    }));
+  });
 });