Add `exitToDirectChannel` to more_direct_channels (#4336)

When a new channel is selected, we set `exitToDirectChannel` to the
newly selected channel. In `handleExit` if `exitToDirectChannel` exists,
the new channel information is pushed. This fixes an issue where the
create_post textarea gains and then loses focus due to the way that
react-overlays (react-bootstrap dependency) handles previous focus which
in this particular case is the `More...` link.

1 files changed, 12 insertions, 1 deletions

diff --git a/webapp/components/more_direct_channels.jsx b/webapp/components/more_direct_channels.jsx
index 11849f718..b37131aed 100644
--- a/webapp/components/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels.jsx
@@ -26,6 +26,7 @@ export default class MoreDirectChannels extends React.Component {
         super(props);
 
         this.handleHide = this.handleHide.bind(this);
+        this.handleExit = this.handleExit.bind(this);
         this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
         this.onChange = this.onChange.bind(this);
         this.createJoinDirectChannelButton = this.createJoinDirectChannelButton.bind(this);
@@ -70,6 +71,12 @@ export default class MoreDirectChannels extends React.Component {
         }
     }
 
+    handleExit() {
+        if (this.exitToDirectChannel) {
+            browserHistory.push(this.exitToDirectChannel);
+        }
+    }
+
     handleShowDirectChannel(teammate, e) {
         e.preventDefault();
 
@@ -81,7 +88,10 @@ export default class MoreDirectChannels extends React.Component {
         openDirectChannelToUser(
             teammate,
             (channel) => {
-                browserHistory.push(TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name);
+                // Due to how react-overlays Modal handles focus, we delay pushing
+                // the new channel information until the modal is fully exited.
+                // The channel information will be pushed in `handleExit`
+                this.exitToDirectChannel = TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + channel.name;
                 this.setState({loadingDMChannel: -1});
                 this.handleHide();
             },
@@ -228,6 +238,7 @@ export default class MoreDirectChannels extends React.Component {
                 dialogClassName='more-modal more-direct-channels'
                 show={this.props.show}
                 onHide={this.handleHide}
+                onExited={this.handleExit}
             >
                 <Modal.Header closeButton={true}>
                     <Modal.Title>