diff --git a/webapp/components/edit_channel_header_modal.jsx b/webapp/components/edit_channel_header_modal.jsx
index d1370506e3..2536e02181 100644
--- a/webapp/components/edit_channel_header_modal.jsx
+++ b/webapp/components/edit_channel_header_modal.jsx
@@ -1,6 +1,8 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+import Textbox from './textbox.jsx';
+
import ReactDOM from 'react-dom';
import Constants from 'utils/constants.jsx';
import * as Utils from 'utils/utils.jsx';
@@ -8,6 +10,9 @@ import PreferenceStore from 'stores/preference_store.jsx';
import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
import {updateChannelHeader} from 'actions/channel_actions.jsx';
+import * as UserAgent from 'utils/user_agent.jsx';
+
+const KeyCodes = Constants.KeyCodes;
import {Modal} from 'react-bootstrap';
@@ -27,8 +32,11 @@ class EditChannelHeaderModal extends React.Component {
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
+ this.handleEditKeyPress = this.handleEditKeyPress.bind(this);
this.onShow = this.onShow.bind(this);
this.onHide = this.onHide.bind(this);
+ this.handlePostError = this.handlePostError.bind(this);
+ this.focusTextbox = this.focusTextbox.bind(this);
this.onPreferenceChange = this.onPreferenceChange.bind(this);
this.ctrlSend = PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter');
@@ -44,6 +52,7 @@ class EditChannelHeaderModal extends React.Component {
componentDidMount() {
PreferenceStore.addChangeListener(this.onPreferenceChange);
this.onShow();
+ this.focusTextbox();
}
componentWillUnmount() {
@@ -81,8 +90,6 @@ class EditChannelHeaderModal extends React.Component {
}
onShow() {
- const textarea = ReactDOM.findDOMNode(this.refs.textarea);
- Utils.placeCaretAtEnd(textarea);
this.submitted = false;
}
@@ -90,6 +97,12 @@ class EditChannelHeaderModal extends React.Component {
this.setState({show: false});
}
+ focusTextbox() {
+ if (!Utils.isMobile()) {
+ this.refs.textbox.focus();
+ }
+ }
+
handleKeyDown(e) {
if (this.ctrlSend && e.keyCode === Constants.KeyCodes.ENTER && e.ctrlKey) {
e.preventDefault();
@@ -100,6 +113,22 @@ class EditChannelHeaderModal extends React.Component {
}
}
+ handleEditKeyPress(e) {
+ if (!UserAgent.isMobile() && !this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) {
+ e.preventDefault();
+ ReactDOM.findDOMNode(this.refs.editbox).blur();
+ this.handleEdit();
+ } else if (this.state.ctrlSend && e.ctrlKey && e.which === KeyCodes.ENTER) {
+ e.preventDefault();
+ ReactDOM.findDOMNode(this.refs.editbox).blur();
+ this.handleEdit();
+ }
+ }
+
+ handlePostError(postError) {
+ this.setState({serverError: postError});
+ }
+
render() {
var serverError = null;
if (this.state.serverError) {
@@ -138,23 +167,29 @@ class EditChannelHeaderModal extends React.Component {
-
-
-
- {serverError}
+
+ {serverError}
+