From 9031fff700d1d589f1f3843498024c6a0c196d05 Mon Sep 17 00:00:00 2001
From: asdvalenzuela <asdvalenzuela@honeycomb.io>
Date: Tue, 28 Aug 2018 06:17:02 -0700
Subject: [PATCH] fix: add support for th elements (#276) (#650)

#363 fixed the positioning issue for td elements, but the problem still existed for th elements.
This PR adds a fix for th elements as well.
---
 packages/popper/src/utils/getOffsetParent.js |  4 +-
 packages/popper/tests/functional/core.js     | 50 +++++++++++++++++++-
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/packages/popper/src/utils/getOffsetParent.js b/packages/popper/src/utils/getOffsetParent.js
index 69b27e9c91..875aacda63 100644
--- 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
index d64eab2fef..cb9b96bf47 100644
--- a/packages/popper/tests/functional/core.js
+++ b/packages/popper/tests/functional/core.js
@@ -1756,7 +1756,7 @@ const arrowSize = 5;
     );
 
     // test for #276
-    it('works inside tables', done => {
+    it('works inside table td elements', done => {
       jasmineWrapper.innerHTML = `
         <style>
           table {
@@ -1803,6 +1803,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.