Merge pull request react-bootstrap#480 from martijnvermaat/null-ownerdocument

[fixed] Don't try to access .ownerDocument on null

Author: mtscout6

src/AffixMixin.js

@@ -104,7 +104,7 @@ const AffixMixin = {
     this._onWindowScrollListener =
       EventListener.listen(window, 'scroll', this.checkPosition);
     this._onDocumentClickListener =
-      EventListener.listen(React.findDOMNode(this).ownerDocument, 'click', this.checkPositionWithEventLoop);
+      EventListener.listen(domUtils.ownerDocument(this), 'click', this.checkPositionWithEventLoop);
   },
 
   componentWillUnmount() {

src/DropdownStateMixin.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
 
 /**
@@ -56,7 +57,7 @@ const DropdownStateMixin = {
   },
 
   bindRootCloseHandlers() {
-    let doc = React.findDOMNode(this).ownerDocument;
+    let doc = domUtils.ownerDocument(this);
 
     this._onDocumentClickListener =
       EventListener.listen(doc, 'click', this.handleDocumentClick);

src/FadeMixin.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import domUtils from './utils/domUtils';
 
 // TODO: listen for onTransitionEnd to remove el
 function getElementsAndSelf (root, classes){
@@ -57,7 +58,8 @@ export default {
 
   componentWillUnmount: function () {
     let els = getElementsAndSelf(React.findDOMNode(this), ['fade']),
-        container = (this.props.container && React.findDOMNode(this.props.container)) || React.findDOMNode(this).ownerDocument.body;
+        container = (this.props.container && React.findDOMNode(this.props.container)) ||
+          domUtils.ownerDocument(this).body;
 
     if (els.length) {
       this._fadeOutEl = document.createElement('div');

src/Modal.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classSet from 'classnames';
 import BootstrapMixin from './BootstrapMixin';
 import FadeMixin from './FadeMixin';
+import domUtils from './utils/domUtils';
 import EventListener from './utils/EventListener';
 
 
@@ -128,9 +129,10 @@ const Modal = React.createClass({
 
   componentDidMount() {
     this._onDocumentKeyupListener =
-      EventListener.listen(React.findDOMNode(this).ownerDocument, 'keyup', this.handleDocumentKeyUp);
+      EventListener.listen(domUtils.ownerDocument(this), 'keyup', this.handleDocumentKeyUp);
 
-    let container = (this.props.container && React.findDOMNode(this.props.container)) || React.findDOMNode(this).ownerDocument.body;
+    let container = (this.props.container && React.findDOMNode(this.props.container)) ||
+          domUtils.ownerDocument(this).body;
     container.className += container.className.length ? ' modal-open' : 'modal-open';
 
     if (this.props.backdrop) {
@@ -146,7 +148,8 @@ const Modal = React.createClass({
 
   componentWillUnmount() {
     this._onDocumentKeyupListener.remove();
-    let container = (this.props.container && React.findDOMNode(this.props.container)) || React.findDOMNode(this).ownerDocument.body;
+    let container = (this.props.container && React.findDOMNode(this.props.container)) ||
+          domUtils.ownerDocument(this).body;
     container.className = container.className.replace(/ ?modal-open/, '');
   },
 

src/OverlayMixin.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import CustomPropTypes from './utils/CustomPropTypes';
+import domUtils from './utils/domUtils';
 
 export default {
   propTypes: {
@@ -63,6 +64,6 @@ export default {
   },
 
   getContainerDOMNode() {
-    return React.findDOMNode(this.props.container || React.findDOMNode(this).ownerDocument.body);
+    return React.findDOMNode(this.props.container) || domUtils.ownerDocument(this).body;
   }
 };

src/utils/domUtils.js

@@ -1,11 +1,24 @@
+import React from 'react';
+
+/**
+ * Get elements owner document
+ *
+ * @param {ReactComponent|HTMLElement} componentOrElement
+ * @returns {HTMLElement}
+ */
+function ownerDocument(componentOrElement) {
+  let elem = React.findDOMNode(componentOrElement);
+  return (elem && elem.ownerDocument) || document;
+}
+
 /**
  * Shortcut to compute element style
  *
  * @param {HTMLElement} elem
  * @returns {CssStyle}
  */
 function getComputedStyles(elem) {
-  return elem.ownerDocument.defaultView.getComputedStyle(elem, null);
+  return ownerDocument(elem).defaultView.getComputedStyle(elem, null);
 }
 
 /**
@@ -21,7 +34,7 @@ function getOffset(DOMNode) {
     return window.jQuery(DOMNode).offset();
   }
 
-  let docElem = DOMNode.ownerDocument.documentElement;
+  let docElem = ownerDocument(DOMNode).documentElement;
   let box = { top: 0, left: 0 };
 
   // If we don't have gBCR, just use 0,0 rather than error
@@ -89,7 +102,7 @@ function getPosition(elem, offsetParent) {
  * @returns {HTMLElement}
  */
 function offsetParentFunc(elem) {
-  let docElem = elem.ownerDocument.documentElement;
+  let docElem = ownerDocument(elem).documentElement;
   let offsetParent = elem.offsetParent || docElem;
 
   while ( offsetParent && ( offsetParent.nodeName !== 'HTML' &&
@@ -101,6 +114,7 @@ function offsetParentFunc(elem) {
 }
 
 export default {
+  ownerDocument: ownerDocument,
   getComputedStyles: getComputedStyles,
   getOffset: getOffset,
   getPosition: getPosition,

test/OverlayMixinSpec.js

@@ -60,4 +60,24 @@ describe('OverlayMixin', function () {
 
     assert.equal(instance.refs.overlay.getOverlayDOMNode(), null);
   });
+
+  it('Should render only an overlay', function() {
+    let OnlyOverlay = React.createClass({
+      mixins: [OverlayMixin],
+
+      render: function() {
+        return null;
+      },
+
+      renderOverlay: function() {
+        return this.props.overlay;
+      }
+    });
+
+    let overlayInstance = ReactTestUtils.renderIntoDocument(
+      <OnlyOverlay overlay={<div id="test1" />} />
+    );
+
+    assert.equal(overlayInstance.getOverlayDOMNode().nodeName, 'DIV');
+  });
 });