feat(Modal): match container behaviour to targetPropType like of Popo…

…ver and Tooltip (#1844)
reactstrap · Jun 3, 2020 · 6ea2488 · 6ea2488
1 parent d394c45
commit 6ea2488
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js
@@ -108,7 +108,7 @@ const ModalsPage = () => {
   // if the element which triggered the modal to open should focused after the modal closes (see example somewhere below)
   returnFocusAfterClose: PropTypes.bool, // defaults to true
   // container to append the modal to
-  container: PropTypes.string // css selector, defauls to "body"
+  container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
 }`}
         </PrismCode>
       </pre>

diff --git a/src/Modal.js b/src/Modal.js
@@ -11,7 +11,9 @@ import {
   omit,
   focusableElements,
   TransitionTimeouts,
-  keyCodes
+  keyCodes,
+  targetPropType,
+  getTarget
 } from './utils';
 
 function noop() { }
@@ -58,7 +60,7 @@ const propTypes = {
   ]),
   unmountOnClose: PropTypes.bool,
   returnFocusAfterClose: PropTypes.bool,
-  container: PropTypes.string
+  container: targetPropType
 };
 
 const propsToOmit = Object.keys(propTypes);
@@ -292,7 +294,7 @@ class Modal extends React.Component {
       this._element.setAttribute('tabindex', '-1');
       this._element.style.position = 'relative';
       this._element.style.zIndex = this.props.zIndex;
-      this._mountContainer = document.querySelector(this.props.container) || document.querySelector('body');
+      this._mountContainer = getTarget(this.props.container);
       this._mountContainer.appendChild(this._element);
     }