Add Add `onExit` hook to new_channel_modal (#4344)

This delays updating the url with the new channel until after the modal
is exited which bypasses a state where the center textarea is focused
and then focus is removed due to how react-overlays handles restoring
focus to the last element focused before the modal was shown.

3 files changed, 17 insertions, 1 deletions

diff --git a/webapp/components/change_url_modal.jsx b/webapp/components/change_url_modal.jsx
index fa115cf36..c9d2f3245 100644
--- a/webapp/components/change_url_modal.jsx
+++ b/webapp/components/change_url_modal.jsx
@@ -145,6 +145,7 @@ export default class ChangeUrlModal extends React.Component {
             <Modal
                 show={this.props.show}
                 onHide={this.doCancel}
+                onExited={this.props.onModalExited}
             >
                 <Modal.Header closeButton={true}>
                     <Modal.Title>{this.props.title}</Modal.Title>
@@ -226,5 +227,6 @@ ChangeUrlModal.propTypes = {
     currentURL: React.PropTypes.string,
     serverError: React.PropTypes.node,
     onModalSubmit: React.PropTypes.func.isRequired,
+    onModalExited: React.PropTypes.func.optional,
     onModalDismissed: React.PropTypes.func.isRequired
 };
diff --git a/webapp/components/new_channel_flow.jsx b/webapp/components/new_channel_flow.jsx
index c6c265725..b37e6cf35 100644
--- a/webapp/components/new_channel_flow.jsx
+++ b/webapp/components/new_channel_flow.jsx
@@ -53,6 +53,7 @@ class NewChannelFlow extends React.Component {
         super(props);
 
         this.doSubmit = this.doSubmit.bind(this);
+        this.onModalExited = this.onModalExited.bind(this);
         this.typeSwitched = this.typeSwitched.bind(this);
         this.urlChangeRequested = this.urlChangeRequested.bind(this);
         this.urlChangeSubmitted = this.urlChangeSubmitted.bind(this);
@@ -117,8 +118,11 @@ class NewChannelFlow extends React.Component {
                             member: data2.member
                         });
 
+                        this.doOnModalExited = () => {
+                            browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + data2.channel.name);
+                        };
+
                         this.props.onModalDismissed();
-                        browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + data2.channel.name);
                     }
                 );
             },
@@ -143,6 +147,11 @@ class NewChannelFlow extends React.Component {
             }
         );
     }
+    onModalExited() {
+        if (this.doOnModalExited) {
+            this.doOnModalExited();
+        }
+    }
     typeSwitched() {
         if (this.state.channelType === 'P') {
             this.setState({channelType: 'O'});
@@ -223,6 +232,7 @@ class NewChannelFlow extends React.Component {
                     serverError={this.state.serverError}
                     onSubmitChannel={this.doSubmit}
                     onModalDismissed={this.props.onModalDismissed}
+                    onModalExited={this.onModalExited}
                     onTypeSwitched={this.typeSwitched}
                     onChangeURLPressed={this.urlChangeRequested}
                     onDataChanged={this.channelDataChanged}
@@ -233,6 +243,7 @@ class NewChannelFlow extends React.Component {
                     channelData={channelData}
                     serverError={this.state.serverError}
                     onSubmitChannel={this.doSubmit}
+                    onModalExited={this.onModalExited}
                     onModalDismissed={this.props.onModalDismissed}
                     onTypeSwitched={this.typeSwitched}
                     onChangeURLPressed={this.urlChangeRequested}
@@ -248,6 +259,7 @@ class NewChannelFlow extends React.Component {
                     serverError={this.state.serverError}
                     onModalSubmit={this.urlChangeSubmitted}
                     onModalDismissed={this.urlChangeDismissed}
+                    onModalExited={this.onModalExited}
                 />
             </span>
         );
diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx
index 4122c3bfb..6ca8911c5 100644
--- a/webapp/components/new_channel_modal.jsx
+++ b/webapp/components/new_channel_modal.jsx
@@ -209,6 +209,7 @@ class NewChannelModal extends React.Component {
                     show={this.props.show}
                     bsSize='large'
                     onHide={this.props.onModalDismissed}
+                    onExited={this.props.onModalExited}
                 >
                     <Modal.Header closeButton={true}>
                         <Modal.Title>
@@ -382,6 +383,7 @@ NewChannelModal.propTypes = {
     serverError: React.PropTypes.node,
     onSubmitChannel: React.PropTypes.func.isRequired,
     onModalDismissed: React.PropTypes.func.isRequired,
+    onModalExited: React.PropTypes.func.optional,
     onTypeSwitched: React.PropTypes.func.isRequired,
     onChangeURLPressed: React.PropTypes.func.isRequired,
     onDataChanged: React.PropTypes.func.isRequired