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, 11 insertions, 4 deletions

diff --git a/webapp/components/delete_channel_modal.jsx b/webapp/components/delete_channel_modal.jsx
index 7ad213395..1b642861a 100644
--- a/webapp/components/delete_channel_modal.jsx
+++ b/webapp/components/delete_channel_modal.jsx
@@ -20,6 +20,9 @@ export default class DeleteChannelModal extends React.Component {
         super(props);
 
         this.handleDelete = this.handleDelete.bind(this);
+        this.onHide = this.onHide.bind(this);
+
+        this.state = {show: true};
     }
 
     handleDelete() {
@@ -39,6 +42,10 @@ export default class DeleteChannelModal extends React.Component {
         );
     }
 
+    onHide() {
+        this.setState({show: false});
+    }
+
     render() {
         let channelTerm = (
             <FormattedMessage
@@ -57,8 +64,9 @@ export default class DeleteChannelModal extends React.Component {
 
         return (
             <Modal
-                show={this.props.show}
-                onHide={this.props.onHide}
+                show={this.state.show}
+                onHide={this.onHide}
+                onExited={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
                     <h4 className='modal-title'>
@@ -84,7 +92,7 @@ export default class DeleteChannelModal extends React.Component {
                     <button
                         type='button'
                         className='btn btn-default'
-                        onClick={this.props.onHide}
+                        onClick={this.onHide}
                     >
                         <FormattedMessage
                             id='delete_channel.cancel'
@@ -109,7 +117,6 @@ export default class DeleteChannelModal extends React.Component {
 }
 
 DeleteChannelModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
     onHide: React.PropTypes.func.isRequired,
     channel: React.PropTypes.object.isRequired
 };