fix(mdTooltip): Tooltip position and watcher issue.

Fixes angular#10162 - When the position was changed dynamically the resulting tooltip's panel would retain the position classes on it's panelEl. Now when creating and recreating the tooltip with a different position class due to a position change, the panel will grab that tracked panel and update its configuration object so that the new position class can be used. Fixes angular#10157 - There was a `mdDirection` watcher that was deleted due to a rebase/timing issue when moving to the `mdPanel` API. Reference to previous PR: angular#7822.
bradrich · Dec 21, 2016 · d6c21f5 · d6c21f5
1 parent 0b72ab9
commit d6c21f5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/src/components/panel/panel.js b/src/components/panel/panel.js
@@ -910,9 +910,12 @@ MdPanelService.prototype.create = function(config) {
   config = config || {};
 
   // If the passed-in config contains an ID and the ID is within _trackedPanels,
-  // return the tracked panel.
+  // return the tracked panel after updating its config with the passed in
+  // config.
   if (angular.isDefined(config.id) && this._trackedPanels[config.id]) {
-    return this._trackedPanels[config.id];
+    var trackedPanel = this._trackedPanels[config.id];
+    angular.extend(trackedPanel.config, config);
+    return trackedPanel;
   }
 
   this._config = {

diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
@@ -78,8 +78,19 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $interpolate,
     var parent = $mdUtil.getParentWithPointerEvents(element);
     var debouncedOnResize = $$rAF.throttle(updatePosition);
     var mouseActive = false;
-    var origin, position, panelPosition, panelRef, autohide, showTimeout,
-        elementFocusedOnWindowBlur = null;
+    var origin, position, panelPosition, panelAnimation, panelRef, autohide,
+        showTimeout, elementFocusedOnWindowBlur, template = null;
+    var id = 'tooltip-' + $mdUtil.nextUid();
+    var attachTo = angular.element(document.body);
+    if (parent && parent[0]) {
+      panelAnimation = $mdPanel.newPanelAnimation()
+          .openFrom(parent)
+          .closeTo(parent)
+          .withAnimation({
+            open: 'md-show',
+            close: 'md-hide'
+          });
+    }
 
     // Set defaults
     setDefaults();
@@ -114,10 +125,12 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $interpolate,
     function updatePosition() {
       setDefaults();
 
-      // If the panel has already been created, remove the current origin
-      // class from the panel element.
+      // If the panel has already been created, remove all possible origin
+      // classes from the panelEl.
       if (panelRef && panelRef.panelEl) {
-        panelRef.panelEl.removeClass(origin);
+        angular.forEach(TOOLTIP_DIRECTIONS, function(value, key) {
+          panelRef.panelEl.removeClass('md-origin-' + key);
+        });
       }
 
       // Set the panel element origin class based off of the current
@@ -261,6 +274,8 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $interpolate,
                 !scope.visibleWatcher ) {
               scope.visibleWatcher = scope.$watch('mdVisible',
                   onVisibleChanged);
+            } else if (mutation.attributeName === 'md-direction') {
+              updatePosition(scope.mdDirection);
             }
           });
         });
@@ -356,35 +371,23 @@ function MdTooltipDirective($timeout, $window, $$rAF, $document, $interpolate,
       if (!element[0].textContent.trim()) {
         throw new Error('Text for the tooltip has not been provided. ' +
             'Please include text within the mdTooltip element.');
+      } else {
+        template = element[0].textContent.trim();
       }
 
-      if (!panelRef) {
-        var id = 'tooltip-' + $mdUtil.nextUid();
-        var attachTo = angular.element(document.body);
-        var content = element.html().trim();
-        var panelAnimation = $mdPanel.newPanelAnimation()
-            .openFrom(parent)
-            .closeTo(parent)
-            .withAnimation({
-              open: 'md-show',
-              close: 'md-hide'
-            });
-
-        var panelConfig = {
-          id: id,
-          attachTo: attachTo,
-          template: content,
-          propagateContainerEvents: true,
-          panelClass: 'md-tooltip ' + origin,
-          animation: panelAnimation,
-          position: panelPosition,
-          zIndex: scope.mdZIndex,
-          focusOnOpen: false
-        };
-
-        panelRef = $mdPanel.create(panelConfig);
-      }
-
+      var panelConfig = {
+        id: id,
+        attachTo: attachTo,
+        template: template,
+        propagateContainerEvents: true,
+        panelClass: 'md-tooltip ' + origin,
+        animation: panelAnimation,
+        position: panelPosition,
+        zIndex: scope.mdZIndex,
+        focusOnOpen: false
+      };
+
+      panelRef = $mdPanel.create(panelConfig);
       panelRef.open().then(function() {
         panelRef.panelEl.attr('role', 'tooltip');
       });

diff --git a/src/components/tooltip/tooltip.spec.js b/src/components/tooltip/tooltip.spec.js
@@ -24,7 +24,7 @@ describe('MdTooltip Component', function() {
     // Make sure to remove/cleanup after each test.
     element.remove();
     var scope = element && element.scope();
-    scope && scope.$destroy;
+    scope && scope.$destroy();
     element = undefined;
   });
 
@@ -102,7 +102,7 @@ describe('MdTooltip Component', function() {
 
         expect(element.attr('aria-label')).toBe('test 2');
       });
-  
+
   it('should not interpolate interpolated values', function() {
     buildTooltip(
         '<md-button>' +