From dbdd719c51d061dfc327644d4b2ca89a0595b4f1 Mon Sep 17 00:00:00 2001 From: Mike Piccolo Date: Fri, 4 Nov 2016 06:14:19 -0700 Subject: PLT-4376 iOS and Android: Keep the keyboard open after sending a message (#4377) * Force keyboard to retain focus on submitting post on mobile * Fix lint error * Allow keyboard to stay closed if the keyboard was closed earlier before submitting * Increase delay time and add to comment * Remove pass through props on suggestion box --- webapp/components/create_post.jsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) (limited to 'webapp/components/create_post.jsx') diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 7cbe48114..db61aca41 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -52,6 +52,7 @@ export default class CreatePost extends React.Component { this.onPreferenceChange = this.onPreferenceChange.bind(this); this.getFileCount = this.getFileCount.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleBlur = this.handleBlur.bind(this); this.sendMessage = this.sendMessage.bind(this); this.focusTextbox = this.focusTextbox.bind(this); this.showPostDeletedModal = this.showPostDeletedModal.bind(this); @@ -71,7 +72,8 @@ export default class CreatePost extends React.Component { ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, showTutorialTip: false, - showPostDeletedModal: false + showPostDeletedModal: false, + lastBlurAt: 0 }; } @@ -128,6 +130,10 @@ export default class CreatePost extends React.Component { } else { this.sendMessage(post); } + + const fasterThanHumanWillClick = 150; + const forceFocus = (Date.now() - this.state.lastBlurAt < fasterThanHumanWillClick); + this.focusTextbox(forceFocus); } sendMessage(post) { @@ -171,8 +177,8 @@ export default class CreatePost extends React.Component { ); } - focusTextbox() { - if (!Utils.isMobile()) { + focusTextbox(keepFocus = false) { + if (keepFocus || !Utils.isMobile()) { this.refs.textbox.focus(); } } @@ -405,6 +411,10 @@ export default class CreatePost extends React.Component { } } + handleBlur() { + this.setState({lastBlurAt: Date.now()}); + } + showPostDeletedModal() { this.setState({ showPostDeletedModal: true @@ -495,6 +505,7 @@ export default class CreatePost extends React.Component { onKeyPress={this.postMsgKeyPress} onKeyDown={this.handleKeyDown} value={this.state.message} + onBlur={this.handleBlur} createMessage={Utils.localizeMessage('create_post.write', 'Write a message...')} channelId={this.state.channelId} id='post_textbox' @@ -536,4 +547,4 @@ export default class CreatePost extends React.Component { ); } -} \ No newline at end of file +} -- cgit v1.2.3-1-g7c22