fix(panel): panel not being constrained to viewport on repeat openings (#9944)

Fixes #9942.

Author: crisbeto

src/components/panel/panel.js

@@ -2713,7 +2713,7 @@ MdPanelPosition.prototype._reduceTranslateValues =
  * @private
  */
 MdPanelPosition.prototype._setPanelPosition = function(panelEl) {
-  // Remove the class in case it has been added before.
+  // Remove the "position adjusted" class in case it has been added before.
   panelEl.removeClass('_md-panel-position-adjusted');
 
   // Only calculate the position if necessary.
@@ -2725,6 +2725,7 @@ MdPanelPosition.prototype._setPanelPosition = function(panelEl) {
   if (this._actualPosition) {
     this._calculatePanelPosition(panelEl, this._actualPosition);
     this._setTransform(panelEl);
+    this._constrainToViewport(panelEl);
     return;
   }
 
@@ -2738,8 +2739,6 @@ MdPanelPosition.prototype._setPanelPosition = function(panelEl) {
     }
   }
 
-  // Class that can be used to re-style the panel if it was repositioned.
-  panelEl.addClass('_md-panel-position-adjusted');
   this._constrainToViewport(panelEl);
 };
 
@@ -2751,6 +2750,8 @@ MdPanelPosition.prototype._setPanelPosition = function(panelEl) {
  */
 MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
   var margin = MdPanelPosition.viewportMargin;
+  var initialTop = this._top;
+  var initialLeft = this._left;
 
   if (this.getTop()) {
     var top = parseInt(this.getTop());
@@ -2775,6 +2776,12 @@ MdPanelPosition.prototype._constrainToViewport = function(panelEl) {
       this._left = left - (right - viewportWidth + margin) + 'px';
     }
   }
+
+  // Class that can be used to re-style the panel if it was repositioned.
+  panelEl.toggleClass(
+    '_md-panel-position-adjusted',
+    this._top !== initialTop || this._left !== initialLeft
+  );
 };
 
 

src/components/panel/panel.spec.js

@@ -2364,6 +2364,39 @@ describe('$mdPanel', function() {
           });
       });
 
+      it('should keep the panel within the viewport on repeat openings',
+        function() {
+
+          config.position = mdPanelPosition
+            .relativeTo(myButton)
+            .addPanelPosition(xPosition.ALIGN_END, yPosition.ALIGN_TOPS);
+
+          var panelRef = $mdPanel.create(config);
+
+          myButton.css({
+            position: 'absolute',
+            left: '-100px',
+            margin: 0
+          });
+
+          panelRef.open();
+          flushPanel();
+
+          expect(panelRef.panelEl[0].offsetLeft).toBe(VIEWPORT_MARGIN);
+          expect(panelRef.panelEl[0]).toHaveClass(ADJUSTED_CLASS);
+
+          panelRef.close();
+          flushPanel();
+
+          panelRef.open();
+          flushPanel();
+
+          expect(panelRef.panelEl[0].offsetLeft).toBe(VIEWPORT_MARGIN);
+          expect(panelRef.panelEl[0]).toHaveClass(ADJUSTED_CLASS);
+
+          panelRef.destroy();
+        });
+
       describe('vertically', function() {
         it('above an element', function() {
           var position = mdPanelPosition