Merge pull request #1125 from atomiks/fix/1124

fix: #1124
floating-ui · Jun 6, 2020 · 2db25a5 · 2db25a5
2 parents 422b69d + 0bcd3ea
commit 2db25a5
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 3 deletions.
diff --git a/src/dom-utils/getOffsetParent.js b/src/dom-utils/getOffsetParent.js
@@ -26,8 +26,11 @@ export default function getOffsetParent(element: Element) {
 
   let offsetParent = getTrueOffsetParent(element);
 
-  // Find the nearest non-table offsetParent
-  while (offsetParent && isTableElement(offsetParent)) {
+  while (
+    offsetParent &&
+    isTableElement(offsetParent) &&
+    getComputedStyle(offsetParent).position === 'static'
+  ) {
     offsetParent = getTrueOffsetParent(offsetParent);
   }
 

diff --git a/...image_snapshots__/table-test-js-should-position-popper-on-right-1124-1-snap.png b/...image_snapshots__/table-test-js-should-position-popper-on-right-1124-1-snap.png
diff --git a/tests/functional/table.test.js b/tests/functional/table.test.js
@@ -4,7 +4,7 @@
  */
 import { screenshot, scroll } from '../utils/puppeteer.js';
 
-const hack = async page => {
+const hack = async (page) => {
   // HACK: fixes issue with tables on GitHub Actions
   if (Boolean(process.env.CI)) {
     await page.addStyleTag({ content: 'table { margin-left: 4px; }' });
@@ -50,3 +50,10 @@ it('should position popper on right when reference and popper are in table insid
 
   expect(await screenshot(page)).toMatchImageSnapshot();
 });
+
+it('should position popper on right #1124', async () => {
+  const page = await browser.newPage();
+  await page.goto(`${TEST_URL}/table/offset-parent-2.html`);
+
+  expect(await screenshot(page)).toMatchImageSnapshot();
+});
diff --git a/tests/visual/table/offset-parent-2.html b/tests/visual/table/offset-parent-2.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html> <title>Basic Visual Test</title>
+
+<style>
+  @import '/reset.css';
+  html,
+  body {
+    height: 1500px;
+  }
+
+  #reference {
+    width: 200px;
+    height: 200px;
+    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;
+  }
+
+  table {
+    margin-top: 100px;
+  }
+
+  th {
+    position: relative;
+  }
+</style>
+
+<table>
+  <tbody>
+    <tr>
+      <th>
+        <div id="reference">Reference</div>
+        <div id="popper">Popper</div>
+      </th>
+    </tr>
+  </tbody>
+</table>
+
+<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>