PLT-4507 Don't mount modals until opened to make resetting state automatic (#4358)

* Don't mount modals until opened to make resetting state automatic

* Move dimiss handler to be fired after modal exit animation complete

1 files changed, 14 insertions, 10 deletions

diff --git a/webapp/components/toggle_modal_button.jsx b/webapp/components/toggle_modal_button.jsx
index 6082901de..304ba386c 100644
--- a/webapp/components/toggle_modal_button.jsx
+++ b/webapp/components/toggle_modal_button.jsx
@@ -16,7 +16,9 @@ export default class ModalToggleButton extends React.Component {
     }
 
     show(e) {
-        e.preventDefault();
+        if (e) {
+            e.preventDefault();
+        }
         this.setState({show: true});
     }
 
@@ -37,17 +39,19 @@ export default class ModalToggleButton extends React.Component {
             };
         }
 
-        // this assumes that all modals will have a show property and an onHide event
-        const dialog = React.createElement(dialogType, Object.assign({}, dialogProps, {
-            show: this.state.show,
-            onHide: () => {
-                this.hide();
+        let dialog;
+        if (this.state.show) {
+            // this assumes that all modals will have an onHide event and will show when mounted
+            dialog = React.createElement(dialogType, Object.assign({}, dialogProps, {
+                onHide: () => {
+                    this.hide();
 
-                if (dialogProps.onHide) {
-                    dialogProps.onHide();
+                    if (dialogProps.onHide) {
+                        dialogProps.onHide();
+                    }
                 }
-            }
-        }));
+            }));
+        }
 
         // nesting the dialog in the anchor tag looks like it shouldn't work, but it does due to how react-bootstrap
         // renders modals at the top level of the DOM instead of where you specify in the virtual DOM