Merge pull request #319 from vaadin/ie11-overlay-position

Replace document with document.body when setting position
vaadin · Oct 6, 2016 · 745fa99 · 745fa99
2 parents 331360e + be60100
commit 745fa99
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 19 deletions.
diff --git a/test/overlay-position.html b/test/overlay-position.html
@@ -139,6 +139,15 @@
         expect(spy.called).to.be.true;
       });
 
+      it('should reposition on scroll', function() {
+        comboBox.opened = true;
+        comboBox.$.overlay.updateViewportBoundaries = sinon.spy();
+
+        comboBox.fire('scroll', {}, {node: document});
+
+        expect(comboBox.$.overlay.updateViewportBoundaries.callCount).to.eql(1);
+      }),
+
       it('should be aligned with input container', function() {
         comboBox.open();
 

diff --git a/vaadin-overlay-behavior.html b/vaadin-overlay-behavior.html
@@ -108,31 +108,36 @@
     },
 
     _setPosition: function(e) {
-      var parent = this._unwrapIfNeeded(this.parentElement);
-      if ((!e || e.target.contains && (e.target.contains(this) || e.target.contains(this.positionTarget))) && parent === document.body) {
-        var targetRect = this.positionTarget.getBoundingClientRect();
-        this._alignedAbove = this._shouldAlignAbove();
+      if (e && e.target) {
+        var target = e.target === document ? document.body : e.target;
+        var parent = this._unwrapIfNeeded(this.parentElement);
+        if (!(target.contains(this) || target.contains(this.positionTarget)) || parent !== document.body) {
+          return;
+        }
+      }
 
-        // overlay max height is restrained by the #scroller max height which is set to 65vh in CSS.
-        this.style.maxHeight = this._maxHeight(targetRect);
+      var targetRect = this.positionTarget.getBoundingClientRect();
+      this._alignedAbove = this._shouldAlignAbove();
 
-        // we need to set height for iron-list to make its `firstVisibleIndex` work correctly.
-        this.$.selector.style.maxHeight = this._maxHeight(targetRect);
+      // overlay max height is restrained by the #scroller max height which is set to 65vh in CSS.
+      this.style.maxHeight = this._maxHeight(targetRect);
 
-        var overlayRect = this.getBoundingClientRect();
-        this._translateX = targetRect.left - overlayRect.left + (this._translateX || 0);
-        this._translateY = targetRect.top - overlayRect.top + (this._translateY || 0) +
-          this._verticalOffset(overlayRect, targetRect);
+      // we need to set height for iron-list to make its `firstVisibleIndex` work correctly.
+      this.$.selector.style.maxHeight = this._maxHeight(targetRect);
 
-        var _devicePixelRatio = window.devicePixelRatio || 1;
-        this._translateX = Math.round(this._translateX * _devicePixelRatio) / _devicePixelRatio;
-        this._translateY = Math.round(this._translateY * _devicePixelRatio) / _devicePixelRatio;
-        this.translate3d(this._translateX + 'px', this._translateY + 'px', '0');
+      var overlayRect = this.getBoundingClientRect();
+      this._translateX = targetRect.left - overlayRect.left + (this._translateX || 0);
+      this._translateY = targetRect.top - overlayRect.top + (this._translateY || 0) +
+        this._verticalOffset(overlayRect, targetRect);
 
-        this.style.width = this.positionTarget.clientWidth + 'px';
+      var _devicePixelRatio = window.devicePixelRatio || 1;
+      this._translateX = Math.round(this._translateX * _devicePixelRatio) / _devicePixelRatio;
+      this._translateY = Math.round(this._translateY * _devicePixelRatio) / _devicePixelRatio;
+      this.translate3d(this._translateX + 'px', this._translateY + 'px', '0');
 
-        this.updateViewportBoundaries();
-      }
+      this.style.width = this.positionTarget.clientWidth + 'px';
+
+      this.updateViewportBoundaries();
     },
 
     _shouldAlignAbove: function() {