fix(computeStyle): correctly calculate bottom when x="top" and `rig…

…ht` when y="left" (#612) Fixes #585
floating-ui · Apr 15, 2018 · deb893f · deb893f
1 parent c857edd
commit deb893f
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/packages/popper/src/modifiers/computeStyle.js b/packages/popper/src/modifiers/computeStyle.js
@@ -66,12 +66,22 @@ export default function computeStyle(data, options) {
   // its bottom.
   let left, top;
   if (sideA === 'bottom') {
-    top = -offsetParentRect.height + offsets.bottom;
+    // when offsetParent is <html> the positioning is relative to the bottom of the screen (excluding the scrollbar)
+    // and not the bottom of the html element
+    if (offsetParent.nodeName === 'HTML') {
+      top = -offsetParent.clientHeight + offsets.bottom;
+    } else {
+      top = -offsetParentRect.height + offsets.bottom;
+    }
   } else {
     top = offsets.top;
   }
   if (sideB === 'right') {
-    left = -offsetParentRect.width + offsets.right;
+    if (offsetParent.nodeName === 'HTML') {
+      left = -offsetParent.clientWidth + offsets.right;
+    } else {
+      left = -offsetParentRect.width + offsets.right;
+    }
   } else {
     left = offsets.left;
   }

diff --git a/packages/popper/tests/functional/computeStyle.js b/packages/popper/tests/functional/computeStyle.js
@@ -0,0 +1,68 @@
+import Popper from '../../src/index.js';
+
+import '@popperjs/test-utils';
+const jasmineWrapper = document.getElementById('jasmineWrapper');
+const arrowSize = 5;
+
+// Utils
+import appendNewPopper from '@popperjs/test-utils/utils/appendNewPopper';
+import appendNewRef from '@popperjs/test-utils/utils/appendNewRef';
+import getRect from '../utils/getRect';
+
+[true, false].forEach((positionFixed) => {
+  beforeEach(function(){
+    Popper.Defaults.positionFixed = positionFixed;
+  });
+
+  describe('[computeStyle]' + (positionFixed ? ' Fixed' : ''), () => {
+    describe('x="top" y="left"', () => {
+      it('positions a popper on the body correctly', (done) => {
+        const reference = appendNewRef(1);
+        const popper = appendNewPopper(2);
+
+        new Popper(reference, popper, {
+          modifiers: {
+            computeStyle: {
+              x: 'top',
+              y: 'left',
+            },
+          },
+          onCreate(data) {
+            const popRect = getRect(popper);
+            const refRect = getRect(reference);
+            expect(popRect.top - arrowSize).toBeApprox(refRect.bottom);
+            expect(popRect.left).toBeApprox(5);
+            data.instance.destroy();
+            done();
+          },
+        });
+      });
+
+      it('positions a popper on a scrolled body correctly', (done) => {
+        jasmineWrapper.style.height = '500vh';
+        jasmineWrapper.style.width = '500vw';
+
+        const reference = appendNewRef(1);
+        const popper = appendNewPopper(2);
+
+        new Popper(reference, popper, {
+          modifiers: {
+            computeStyle: {
+              x: 'top',
+              y: 'left',
+            },
+          },
+          onCreate(data) {
+            const popRect = getRect(popper);
+            const refRect = getRect(reference);
+            expect(popRect.top - arrowSize).toBeApprox(refRect.bottom);
+            expect(popRect.left).toBeApprox(5);
+            jasmineWrapper.style.cssText = null;
+            data.instance.destroy();
+            done();
+          },
+        });
+      });
+    });
+  });
+});