Hide other modals when showing a mounted modal for react select compa…

…tibility
jadu · Sep 30, 2021 · ef2b954 · ef2b954
1 parent 6840922
commit ef2b954
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/components/html/Modal/MountedModal.jsx b/src/components/html/Modal/MountedModal.jsx
@@ -3,11 +3,23 @@ import ModalPortal from "./ModalPortal";
 import Modal from "./Modal";
 
 export default class MountedModal extends React.Component {
-    render() {
-        if (this.props.show === false) {
-            return null;
+    componentDidMount() {
+        let shownModal = document.querySelector('.modal.in');
+        if (shownModal) {
+            shownModal.setAttribute('style', 'display:none');
+            shownModal.setAttribute('data-shown-modal', 'true');
+        }
+    }
+
+    componentWillUnmount() {
+        let shownModal = document.querySelector('[data-shown-modal=true]');
+        if (shownModal) {
+            shownModal.setAttribute('style', 'display:block');
+            shownModal.removeAttribute('data-shown');
         }
+    }
 
+    render() {
         return <ModalPortal portalId="react-modal-container">
             <Modal style={{display: 'block'}} className={`${this.props.large ? 'modal--large' : ''} in`}>
                 {this.props.children}