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/sidebar.jsx b/webapp/components/sidebar.jsx
index 21df429f7..08f89c2ff 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -715,6 +715,16 @@ export default class Sidebar extends React.Component {
             }
         }
 
+        let moreDirectChannelsModal;
+        if (this.state.showDirectChannelsModal) {
+            moreDirectChannelsModal = (
+                <MoreDirectChannels
+                    show={true}
+                    onModalDismissed={this.hideMoreDirectChannelsModal}
+                />
+            );
+        }
+
         return (
             <div
                 className='sidebar--left'
@@ -726,10 +736,7 @@ export default class Sidebar extends React.Component {
                     channelType={this.state.newChannelModalType}
                     onModalDismissed={this.hideNewChannelModal}
                 />
-                <MoreDirectChannels
-                    show={this.state.showDirectChannelsModal}
-                    onModalDismissed={this.hideMoreDirectChannelsModal}
-                />
+                {moreDirectChannelsModal}
 
                 <SidebarHeader
                     teamDisplayName={this.state.currentTeam.display_name}