Adding focus for channel modals

3 files changed, 17 insertions, 0 deletions

diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx
index 5b3c74e82..58f2cdbed 100644
--- a/web/react/components/edit_channel_modal.jsx
+++ b/web/react/components/edit_channel_modal.jsx
@@ -55,9 +55,13 @@ export default class EditChannelModal extends React.Component {
         const button = e.relatedTarget;
         this.setState({header: $(button).attr('data-header'), title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), serverError: ''});
     }
+    handleShown() {
+        $('#edit_channel #edit_header').focus();
+    }
     componentDidMount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
         $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose);
+        $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.handleShown);
     }
     componentWillUnmount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose);
@@ -114,6 +118,7 @@ export default class EditChannelModal extends React.Component {
                             <textarea
                                 className='form-control no-resize'
                                 rows='6'
+                                id='edit_header'
                                 maxLength='1024'
                                 value={this.state.header}
                                 onChange={this.handleUserInput}
diff --git a/web/react/components/edit_channel_purpose_modal.jsx b/web/react/components/edit_channel_purpose_modal.jsx
index 4d162cfe7..4cb96a3ff 100644
--- a/web/react/components/edit_channel_purpose_modal.jsx
+++ b/web/react/components/edit_channel_purpose_modal.jsx
@@ -15,6 +15,12 @@ export default class EditChannelPurposeModal extends React.Component {
         this.state = {serverError: ''};
     }
 
+    componentDidUpdate() {
+        if (this.props.show) {
+            $(ReactDOM.findDOMNode(this.refs.purpose)).focus();
+        }
+    }
+
     handleHide() {
         this.setState({serverError: ''});
 
@@ -77,6 +83,7 @@ export default class EditChannelPurposeModal extends React.Component {
         return (
             <Modal
                 className='modal-edit-channel-purpose'
+                ref='modal'
                 show={this.props.show}
                 onHide={this.handleHide}
             >
diff --git a/web/react/components/rename_channel_modal.jsx b/web/react/components/rename_channel_modal.jsx
index 80f0956f2..f355ea9b2 100644
--- a/web/react/components/rename_channel_modal.jsx
+++ b/web/react/components/rename_channel_modal.jsx
@@ -118,9 +118,13 @@ export default class RenameChannelModal extends React.Component {
         const button = $(e.relatedTarget);
         this.setState({displayName: button.attr('data-display'), channelName: button.attr('data-name'), channelId: button.attr('data-channelid')});
     }
+    handleShown() {
+        $('#rename_channel #display_name').focus();
+    }
     componentDidMount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.handleShow);
         $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.handleClose);
+        $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.handleShown);
     }
     componentWillUnmount() {
         $(ReactDOM.findDOMNode(this.refs.modal)).off('hidden.bs.modal', this.handleClose);
@@ -176,6 +180,7 @@ export default class RenameChannelModal extends React.Component {
                                         onChange={this.onDisplayNameChange}
                                         type='text'
                                         ref='displayName'
+                                        id='display_name'
                                         className='form-control'
                                         placeholder='Enter display name'
                                         value={this.state.displayName}