fix(preventOverflow): tether activating too early with point reference

floating-ui · Feb 10, 2020 · c1cea11 · c1cea11
1 parent 7a5e20f
commit c1cea11
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 5 deletions.
diff --git a/src/modifiers/preventOverflow.js b/src/modifiers/preventOverflow.js
@@ -101,11 +101,7 @@ function preventOverflow({ state, options, name }: ModifierArguments<Options>) {
     // and near the edge of a boundary, the popper can overflow even if the
     // reference is not overflowing as well (e.g. virtual elements with no
     // width or height)
-    const arrowLen = within(
-      0,
-      Math.abs(referenceRect[len] - arrowRect[len]),
-      arrowRect[len]
-    );
+    const arrowLen = within(0, referenceRect[len], arrowRect[len]);
 
     const minOffset = isBasePlacement
       ? referenceRect[len] / 2 -

diff --git a/...-should-not-be-tethered-earlier-than-expected-with-a-point-reference-1-snap.png b/...-should-not-be-tethered-earlier-than-expected-with-a-point-reference-1-snap.png
diff --git a/tests/functional/preventOverflow.test.js b/tests/functional/preventOverflow.test.js
@@ -13,6 +13,15 @@ it('should not overflow when small reference is at edge of boundary', async () =
   expect(await screenshot(page)).toMatchImageSnapshot();
 });
 
+it('should not be tethered earlier than expected with a point reference', async () => {
+  const page = await browser.newPage();
+  await page.goto(`${TEST_URL}/modifiers/preventOverflow/point.html`);
+
+  await scroll(page, '#scroll', 300);
+
+  expect(await screenshot(page)).toMatchImageSnapshot();
+});
+
 it('should take into account the arrow padding (mainSide)', async () => {
   const page = await browser.newPage();
   await page.goto(`${TEST_URL}/modifiers/preventOverflow/arrow.html`);

diff --git a/tests/visual/modifiers/preventOverflow/point.html b/tests/visual/modifiers/preventOverflow/point.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html> <title>Basic Visual Test</title>
+
+<style>
+  body {
+    margin: 0;
+  }
+
+  #scroll {
+    overflow: scroll;
+    width: 300px;
+    height: 300px;
+    background-color: grey;
+  }
+
+  #scroll::before {
+    content: 'before';
+    display: block;
+    height: 300px;
+    width: 1px;
+  }
+
+  #scroll::after {
+    content: 'after';
+    display: block;
+    height: 500px;
+    width: 1px;
+  }
+
+  #reference {
+    width: 0px;
+    height: 0px;
+    background-color: red;
+    box-shadow: inset 0 0 0 1px black;
+  }
+
+  #popper {
+    width: 100px;
+    height: 100px;
+    background-color: rebeccapurple;
+    box-shadow: inset 0 0 0 1px black;
+  }
+
+  #arrow {
+    width: 20px;
+    height: 20px;
+    background-color: yellow;
+  }
+</style>
+
+<div id="scroll">
+  <div id="reference"></div>
+</div>
+<div id="popper">
+  Popper Box
+  <div id="arrow" data-popper-arrow></div>
+</div>
+
+<script type="module">
+  import { createPopper } from '../../dist/popper.js';
+  const reference = document.querySelector('#reference');
+  const popper = document.querySelector('#popper');
+
+  window.instance = createPopper(reference, popper, {
+    placement: 'right',
+  });
+</script>