Merge c5b148d into b67ad54

README.md

@@ -170,24 +170,8 @@ object will apply to all instances of the modal.
 
 ### Appended to custom node
 
-You can choose an element for the modal to be appended to, rather than using
-body tag. To do this, provide a function to `parentSelector` prop that return
-the element to be used.
-
-```jsx
-
-function getParent() {
-  return document.querySelector('#root');
-}
-
-<Modal
-  ...
-  parentSelector={getParent}
-  ...
->
-  <p>Modal Content.</p>
-</Modal>
-```
+`parentSelector` is now deprecated. `<Modal />` can be appended on any place
+and it will correctly manage it's clean up.
 
 ### Body class
 

docs/README.md

@@ -78,10 +78,6 @@ import ReactModal from 'react-modal';
     String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
   */
   role="dialog"
-  /*
-    Function that will be called to get the parent element that the modal will be attached to.
-  */
-  parentSelector={() => document.body}
   /*
     Additional aria attributes (optional).
   */

specs/Modal.spec.js

@@ -54,26 +54,24 @@ describe('State', () => {
     ReactDOM.unmountComponentAtNode(node);
   });
 
-  it('renders into the body, not in context', () => {
-    const node = document.createElement('div');
+  it('renders in context, never in document.body', function() {
+    var node = document.createElement('div');
+    var realRef = null;
     class App extends Component {
       render() {
-        return (
-          <div>
-            <Modal isOpen>
-              <span>hello</span>
-            </Modal>
+	return (
+          <div ref={ref => { realRef = ref; }}>
+	    <Modal isOpen={true}>
+	      <span>hello</span>
+	    </Modal>
           </div>
-        );
+	);
       }
     }
     Modal.setAppElement(node);
     ReactDOM.render(<App />, node);
-    expect(
-      document.body.querySelector('.ReactModalPortal').parentNode
-    ).toEqual(
-      document.body
-    );
+    var modalParent = node.querySelector('.ReactModalPortal').parentNode;
+    expect(modalParent).toEqual(realRef);
     ReactDOM.unmountComponentAtNode(node);
   });
 

src/components/Modal.js

@@ -10,10 +10,6 @@ export const bodyOpenClassName = 'ReactModal__Body--open';
 
 const renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
 
-function getParentElement(parentSelector) {
-  return parentSelector();
-}
-
 export default class Modal extends Component {
   static setAppElement(element) {
     ariaAppHider.setElement(element);
@@ -52,7 +48,6 @@ export default class Modal extends Component {
     closeTimeoutMS: PropTypes.number,
     ariaHideApp: PropTypes.bool,
     shouldCloseOnOverlayClick: PropTypes.bool,
-    parentSelector: PropTypes.func,
     aria: PropTypes.object,
     role: PropTypes.string,
     contentLabel: PropTypes.string.isRequired
@@ -65,8 +60,7 @@ export default class Modal extends Component {
     bodyOpenClassName,
     ariaHideApp: true,
     closeTimeoutMS: 0,
-    shouldCloseOnOverlayClick: true,
-    parentSelector() { return document.body; }
+    shouldCloseOnOverlayClick: true
   };
 
   static defaultStyles = {
@@ -95,12 +89,6 @@ export default class Modal extends Component {
   };
 
   componentDidMount() {
-    this.node = document.createElement('div');
-    this.node.className = this.props.portalClassName;
-
-    const parent = getParentElement(this.props.parentSelector);
-    parent.appendChild(this.node);
-
     this.renderPortal(this.props);
   }
 
@@ -109,14 +97,6 @@ export default class Modal extends Component {
     // Stop unnecessary renders if modal is remaining closed
     if (!this.props.isOpen && !isOpen) return;
 
-    const currentParent = getParentElement(this.props.parentSelector);
-    const newParent = getParentElement(newProps.parentSelector);
-
-    if (newParent !== currentParent) {
-      currentParent.removeChild(this.node);
-      newParent.appendChild(this.node);
-    }
-
     this.renderPortal(newProps);
   }
 
@@ -146,10 +126,13 @@ export default class Modal extends Component {
     }
   }
 
+  setNodeRef = ref => {
+    this.node = ref;
+  }
+
   removePortal = () => {
     ReactDOM.unmountComponentAtNode(this.node);
-    const parent = getParentElement(this.props.parentSelector);
-    parent.removeChild(this.node);
+    this.portal = null;
   }
 
   renderPortal = props => {
@@ -159,6 +142,10 @@ export default class Modal extends Component {
   }
 
   render() {
-    return null;
+    return (
+      <div
+        ref={this.setNodeRef}
+        className={this.props.portalClassName} />
+    );
   }
 }