From 6ea2488c97eb24b0c8f15bbf26b2768921932607 Mon Sep 17 00:00:00 2001
From: Jasper De Moor <jasperdemoor@gmail.com>
Date: Wed, 3 Jun 2020 10:45:39 +0200
Subject: [PATCH] feat(Modal): match container behaviour to targetPropType like
 of Popover and Tooltip (#1844)

---
 docs/lib/Components/ModalsPage.js | 2 +-
 src/Modal.js                      | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js
index 350697b34..d82ee173e 100644
--- 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
index 2fa174074..f8383a921 100644
--- 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);
     }