fix: add support for th elements (floating-ui#276)

asdvalenzuela · Jul 13, 2018 · 38f685f · 38f685f
1 parent fec3de1
commit 38f685f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/packages/popper/src/utils/getOffsetParent.js b/packages/popper/src/utils/getOffsetParent.js
@@ -27,10 +27,10 @@ export default function getOffsetParent(element) {
     return element ? element.ownerDocument.documentElement : document.documentElement;
   }
 
-  // .offsetParent will return the closest TD or TABLE in case
+  // .offsetParent will return the closest TH, TD or TABLE in case
   // no offsetParent is present, I hate this job...
   if (
-    ['TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&
+    ['TH', 'TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&
     getStyleComputedProperty(offsetParent, 'position') === 'static'
   ) {
     return getOffsetParent(offsetParent);

diff --git a/packages/popper/tests/functional/core.js b/packages/popper/tests/functional/core.js
@@ -1720,7 +1720,7 @@ const arrowSize = 5;
     );
 
     // test for #276
-    it('works inside tables', done => {
+    it('works inside table td elements', done => {
       jasmineWrapper.innerHTML = `
         <style>
           table {
@@ -1767,6 +1767,54 @@ const arrowSize = 5;
       });
     });
 
+     // test for #276
+     it('works inside table th elements', done => {
+      jasmineWrapper.innerHTML = `
+        <style>
+          table {
+            margin-top: 50px;
+          }
+          #reference {
+            background: orange;
+            width: 50px;
+            height: 50px;
+          }
+          #popper {
+            background: green;
+            width: 50px;
+            height: 50px;
+          }
+        </style>
+        <table>
+          <tbody>
+            <tr>
+              <th>
+                <div id="reference">
+                  ref
+                </div>
+                <div id="popper">
+                  pop
+                </div>
+              </th>
+            </tr>
+          </tbody>
+        </table>
+      `;
+
+      const reference = document.getElementById('reference');
+      const popper = document.getElementById('popper');
+
+      new Popper(reference, popper, {
+        placement: 'bottom',
+        onCreate(data) {
+          expect(getRect(reference).bottom).toBeApprox(getRect(popper).top);
+          expect(getRect(reference).left).toBeApprox(getRect(popper).left);
+          data.instance.destroy();
+          done();
+        },
+      });
+    });
+
     // test for #453
     // When the reference is inside a scrollParent, it should be used as the
     // source for choosing the scrollParent rather than the popper.