Merge pull request react-bootstrap#1053 from benekastah/svg-overlay-target

Overlays don't position themselves properly when target is an SVG

Author: jquense

src/utils/domUtils.js

@@ -137,6 +137,25 @@ function getPosition(elem, offsetParent) {
   };
 }
 
+/**
+ * Get an element's size
+ *
+ * @param {HTMLElement} elem
+ * @returns {{width: number, height: number}}
+ */
+function getSize(elem) {
+  let rect = {
+    width: elem.offsetWidth || 0,
+    height: elem.offsetHeight || 0
+  };
+  if (typeof elem.getBoundingClientRect !== 'undefined') {
+    let {width, height} = elem.getBoundingClientRect();
+    rect.width = width || rect.width;
+    rect.height = height || rect.height;
+  }
+  return rect;
+}
+
 /**
  * Get parent element
  *
@@ -187,6 +206,7 @@ export default {
   getComputedStyles,
   getOffset,
   getPosition,
+  getSize,
   activeElement: getActiveElement,
   offsetParent: offsetParentFunc
 };

src/utils/overlayPositionUtils.js

@@ -3,42 +3,35 @@ import domUtils from './domUtils';
 const utils = {
 
   getContainerDimensions(containerNode) {
-    let width, height, scroll;
+    let size, scroll;
 
     if (containerNode.tagName === 'BODY') {
-      width = window.innerWidth;
-      height = window.innerHeight;
+      size = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
       scroll =
         domUtils.ownerDocument(containerNode).documentElement.scrollTop ||
         containerNode.scrollTop;
     } else {
-      width = containerNode.offsetWidth;
-      height = containerNode.offsetHeight;
+      size = domUtils.getSize(containerNode);
       scroll = containerNode.scrollTop;
     }
 
-    return {width, height, scroll};
+    return {...size, scroll};
   },
 
   getPosition(target, container) {
     const offset = container.tagName === 'BODY' ?
       domUtils.getOffset(target) : domUtils.getPosition(target, container);
-
-    return {
-      ...offset,
-
-      // In Firefox, the target does not have a offsetHeight or offsetWidth
-      // property. For now, default them to 0 to keep code from breaking.
-      height: target.offsetHeight || 0,
-      width: target.offsetWidth || 0
-    };
+    const size = domUtils.getSize(target);
+    return {...offset, ...size};
   },
 
   calcOverlayPosition(placement, overlayNode, target, container, padding) {
     const childOffset = utils.getPosition(target, container);
 
-    const overlayHeight = overlayNode.offsetHeight;
-    const overlayWidth = overlayNode.offsetWidth;
+    const {height: overlayHeight, width: overlayWidth} = domUtils.getSize(overlayNode);
 
     let positionLeft, positionTop, arrowOffsetLeft, arrowOffsetTop;