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

diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index c7842aaa3..dd0fd5b70 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -450,6 +450,7 @@ export default class ChannelHeader extends React.Component {
                         role='presentation'
                     >
                         <ToggleModalButton
+                            ref='channelInviteModalButton'
                             role='menuitem'
                             dialogType={ChannelInviteModal}
                             dialogProps={{channel, currentUser: this.state.currentUser}}
@@ -662,6 +663,28 @@ export default class ChannelHeader extends React.Component {
             </OverlayTrigger>
         );
 
+        let channelMembersModal;
+        if (this.state.showMembersModal) {
+            channelMembersModal = (
+                <ChannelMembersModal
+                    onModalDismissed={() => this.setState({showMembersModal: false})}
+                    showInviteModal={() => this.refs.channelInviteModalButton.show()}
+                    channel={channel}
+                    isAdmin={isAdmin}
+                />
+            );
+        }
+
+        let editPurposeModal;
+        if (this.state.showEditChannelPurposeModal) {
+            editPurposeModal = (
+                <EditChannelPurposeModal
+                    onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})}
+                    channel={channel}
+                />
+            );
+        }
+
         return (
             <div
                 id='channel-header'
@@ -753,17 +776,8 @@ export default class ChannelHeader extends React.Component {
                         </tr>
                     </tbody>
                 </table>
-                <EditChannelPurposeModal
-                    show={this.state.showEditChannelPurposeModal}
-                    onModalDismissed={() => this.setState({showEditChannelPurposeModal: false})}
-                    channel={channel}
-                />
-                <ChannelMembersModal
-                    show={this.state.showMembersModal}
-                    onModalDismissed={() => this.setState({showMembersModal: false})}
-                    channel={channel}
-                    isAdmin={isAdmin}
-                />
+                {editPurposeModal}
+                {channelMembersModal}
                 <RenameChannelModal
                     show={this.state.showRenameChannelModal}
                     onHide={this.hideRenameChannelModal}