[fix] Fixed #276

floating-ui · Jul 23, 2017 · ffd478a · ffd478a
1 parent 1762a67
commit ffd478a
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 2 deletions.
diff --git a/packages/popper/package.json b/packages/popper/package.json
@@ -35,7 +35,7 @@
     "build": "node bundle.js",
     "lint": "eslint .",
     "test": "popper-karma",
-    "test:dev": "NODE_ENV=development npm run test",
+    "test:dev": "BROWSERS=Chrome NODE_ENV=development npm run test",
     "coverage": "NODE_ENV=coverage npm run test"
   },
   "devDependencies": {

diff --git a/packages/popper/src/utils/getOffsetParent.js b/packages/popper/src/utils/getOffsetParent.js
@@ -1,3 +1,4 @@
+import getStyleComputedProperty from './getStyleComputedProperty';
 /**
  * Returns the offset parent of the given element
  * @method
@@ -14,5 +15,14 @@ export default function getOffsetParent(element) {
     return window.document.documentElement;
   }
 
+  // .offsetParent will return the closest TD or TABLE in case
+  // no offsetParent is present, I hate this job...
+  if (
+    ['TD', 'TABLE'].indexOf(offsetParent.nodeName) !== -1 &&
+    getStyleComputedProperty(offsetParent, 'position') === 'static'
+  ) {
+    return getOffsetParent(offsetParent);
+  }
+
   return offsetParent;
 }
diff --git a/packages/popper/src/utils/isOffsetContainer.js b/packages/popper/src/utils/isOffsetContainer.js
@@ -1,9 +1,11 @@
+import getOffsetParent from './getOffsetParent';
+
 export default function isOffsetContainer(element) {
   const { nodeName } = element;
   if (nodeName === 'BODY') {
     return false;
   }
   return (
-    nodeName === 'HTML' || element.firstElementChild.offsetParent === element
+    nodeName === 'HTML' || getOffsetParent(element.firstElementChild) === element
   );
 }
diff --git a/packages/popper/tests/functional/core.js b/packages/popper/tests/functional/core.js
@@ -1498,4 +1498,53 @@ describe('[core]', () => {
       },
     });
   });
+
+  // test for #276
+  it('correct position if offset parent has borders', 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>
+            <td>
+              <div id="reference">
+                ref
+              </div>
+              <div id="popper">
+                pop
+              </div>
+            </td>
+          </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();
+      },
+    });
+  });
+
 });