fix(tabs): new tab animation broken by code to support IE11

Fixes #11689
angular · Apr 19, 2019 · bf00756 · bf00756
1 parent 16cea88
commit bf00756
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/src/components/tabs/demoDynamicTabs/script.js b/src/components/tabs/demoDynamicTabs/script.js
@@ -32,14 +32,14 @@
       previous = null;
     $scope.tabs = tabs;
     $scope.selectedIndex = 0;
-    $scope.$watch('selectedIndex', function(current, old) {
+    $scope.$watch('selectedIndex', function(newVal, oldVal) {
       previous = selected;
-      selected = tabs[current];
-      if (old + 1 && (old !== current)) {
-        $log.debug('Goodbye ' + previous.title + '!');
+      selected = tabs[newVal];
+      if (oldVal + 1 && !angular.equals(oldVal, newVal)) {
+        $log.log('Goodbye ' + previous.title + '!');
       }
-      if (current + 1) {
-        $log.debug('Hello ' + selected.title + '!');
+      if (newVal + 1 > 0) {
+        $log.log('Hello ' + selected.title + '!');
       }
     });
     $scope.addTab = function(title, view) {
@@ -52,4 +52,3 @@
     };
   }
 })();
-
diff --git a/src/components/tabs/js/tabDirective.js b/src/components/tabs/js/tabDirective.js
@@ -25,7 +25,8 @@
  * @param {string=} label Optional attribute to specify a simple string as the tab label
  * @param {boolean=} ng-disabled If present and expression evaluates to truthy, disabled tab
  *  selection.
- * @param {string=} md-tab-class Optional attribute to specify a class that will be applied to the tab's button
+ * @param {string=} md-tab-class Optional attribute to specify a class that will be applied to the
+ *  tab's button
  * @param {expression=} md-on-deselect Expression to be evaluated after the tab has been
  *  de-selected.
  * @param {expression=} md-on-select Expression to be evaluated after the tab has been selected.
@@ -36,7 +37,8 @@
  * @usage
  *
  * <hljs lang="html">
- * <md-tab label="My Tab" md-tab-class="my-content-tab" ng-disabled md-on-select="onSelect()" md-on-deselect="onDeselect()">
+ * <md-tab label="My Tab" md-tab-class="my-content-tab" ng-disabled md-on-select="onSelect()"
+ *         md-on-deselect="onDeselect()">
  *   <h3>My Tab content</h3>
  * </md-tab>
  *

diff --git a/src/components/tabs/js/tabsController.js b/src/components/tabs/js/tabsController.js
@@ -230,13 +230,13 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
    * @param {string|number} left
    */
   function handleOffsetChange (left) {
-    var elements = getElements();
     var newValue = ((ctrl.shouldCenterTabs || isRtl() ? '' : '-') + left + 'px');
 
     // Fix double-negative which can happen with RTL support
     newValue = newValue.replace('--', '');
 
-    angular.element(elements.paging).css($mdConstant.CSS.TRANSFORM, 'translate(' + newValue + ', 0)');
+    angular.element(getElements().paging).css($mdConstant.CSS.TRANSFORM,
+                                              'translate(' + newValue + ', 0)');
     $scope.$broadcast('$mdTabsPaginationChanged');
   }
 
@@ -439,11 +439,11 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
    * Create an entry in the tabs array for a new tab at the specified index.
    * @param {Object} tabData tab to insert
    * @param {number} index location to insert the new tab
-   * @returns {*}
+   * @returns {Object} the inserted tab
    */
   function insertTab (tabData, index) {
     var hasLoaded = loaded;
-    var proto     = {
+    var proto = {
           getIndex:     function () { return ctrl.tabs.indexOf(tab); },
           isActive:     function () { return this.getIndex() === ctrl.selectedIndex; },
           isLeft:       function () { return this.getIndex() < ctrl.selectedIndex; },
@@ -455,24 +455,27 @@ function MdTabsController ($scope, $element, $window, $mdConstant, $mdTabInkRipp
           },
           id:           $mdUtil.nextUid(),
           hasContent: !!(tabData.template && tabData.template.trim())
-        },
-        tab       = angular.extend(proto, tabData);
+    };
+    var tab = angular.extend(proto, tabData);
+
     if (angular.isDefined(index)) {
       ctrl.tabs.splice(index, 0, tab);
     } else {
       ctrl.tabs.push(tab);
     }
-
     processQueue();
     updateHasContent();
+
     $mdUtil.nextTick(function () {
       updatePagination();
       setAriaControls(tab);
 
       // if autoselect is enabled, select the newly added tab
-      if (hasLoaded && ctrl.autoselect) $mdUtil.nextTick(function () {
-        $mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); });
-      });
+      if (hasLoaded && ctrl.autoselect) {
+        $mdUtil.nextTick(function () {
+          $mdUtil.nextTick(function () { select(ctrl.tabs.indexOf(tab)); });
+        });
+      }
     });
     return tab;
   }