diff --git a/README.md b/README.md
index a46dc668..aee3a2d4 100644
--- a/README.md
+++ b/README.md
@@ -171,24 +171,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 Content.
-
-```
+`parentSelector` is now deprecated. `` can be appended on any place
+and it will correctly manage it's clean up.
### Body class
diff --git a/docs/README.md b/docs/README.md
index e05c0d2a..56ca3bfe 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -83,10 +83,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).
*/
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index f9861b45..bb97c472 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -61,26 +61,24 @@ export default () => {
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 (
-
-
- hello
-
+ return (
+
{ realRef = ref; }}>
+
+ hello
+
- );
+ );
}
}
Modal.setAppElement(node);
ReactDOM.render(
, node);
- document.body.querySelector(
- '.ReactModalPortal'
- ).parentNode.should.be.eql(
- document.body
- );
+ var modalParent = node.querySelector('.ReactModalPortal').parentNode;
+ expect(modalParent).toEqual(realRef);
ReactDOM.unmountComponentAtNode(node);
});
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 00c0203e..018cee61 100644
--- a/src/components/Modal.js
+++ b/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);
@@ -53,7 +49,6 @@ export default class Modal extends Component {
ariaHideApp: PropTypes.bool,
shouldFocusAfter: PropTypes.bool,
shouldCloseOnOverlayClick: PropTypes.bool,
- parentSelector: PropTypes.func,
aria: PropTypes.object,
role: PropTypes.string,
contentLabel: PropTypes.string
@@ -68,7 +63,6 @@ export default class Modal extends Component {
closeTimeoutMS: 0,
shouldFocusAfterRender: true,
shouldCloseOnOverlayClick: true,
- parentSelector() { return document.body; }
};
static defaultStyles = {
@@ -97,12 +91,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);
}
@@ -111,14 +99,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);
}
@@ -148,10 +128,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 => {
@@ -161,6 +144,10 @@ export default class Modal extends Component {
}
render() {
- return null;
+ return (
+
+ );
}
}