From 65f51c7bc4bb0b85532a23171306ba7d331c2fd9 Mon Sep 17 00:00:00 2001 From: enahum Date: Mon, 6 Jun 2016 15:54:02 -0300 Subject: PLT-3056 Fix Unable to type quickly in post textbox in IE11 (#3249) --- webapp/components/create_comment.jsx | 13 +++++++++---- webapp/components/create_post.jsx | 11 +++++++---- webapp/components/edit_post_modal.jsx | 14 +++++++++----- webapp/components/suggestion/suggestion_box.jsx | 5 ++--- webapp/components/textbox.jsx | 10 ++++++++-- 5 files changed, 35 insertions(+), 18 deletions(-) (limited to 'webapp/components') diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 8c80ad993..a9cf68833 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -78,7 +78,8 @@ class CreateComment extends React.Component { previews: draft.previews, submitting: false, ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - showPostDeletedModal: false + showPostDeletedModal: false, + typing: false }; } @@ -184,7 +185,8 @@ class CreateComment extends React.Component { submitting: false, postError: null, previews: [], - serverError: null + serverError: null, + typing: false }); } @@ -206,7 +208,9 @@ class CreateComment extends React.Component { PostStore.storeCommentDraft(this.props.rootId, draft); $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight); - this.setState({messageText: messageText}); + + const typing = messageText !== ''; + this.setState({messageText, typing}); } handleKeyDown(e) { @@ -325,7 +329,7 @@ class CreateComment extends React.Component { componentWillReceiveProps(newProps) { if (newProps.rootId !== this.props.rootId) { const draft = PostStore.getCommentDraft(newProps.rootId); - this.setState({messageText: draft.message, uploadsInProgress: draft.uploadsInProgress, previews: draft.previews}); + this.setState({messageText: draft.message, uploadsInProgress: draft.uploadsInProgress, previews: draft.previews, typing: false}); } } @@ -415,6 +419,7 @@ class CreateComment extends React.Component { onKeyPress={this.commentMsgKeyPress} onKeyDown={this.handleKeyDown} messageText={this.state.messageText} + typing={this.state.typing} createMessage={formatMessage(holders.addComment)} initialText='' supportsCommands={false} diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index ea4459d7d..7aa0a586b 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -87,7 +87,8 @@ class CreatePost extends React.Component { ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), centerTextbox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED, showTutorialTip: false, - showPostDeletedModal: false + showPostDeletedModal: false, + typing: false }; } @@ -132,7 +133,7 @@ class CreatePost extends React.Component { MessageHistoryStore.storeMessageInHistory(this.state.messageText); - this.setState({submitting: true, serverError: null}); + this.setState({submitting: true, serverError: null, typing: false}); if (post.message.indexOf('/') === 0) { ChannelActions.executeCommand( @@ -218,7 +219,8 @@ class CreatePost extends React.Component { } handleUserInput(messageText) { - this.setState({messageText}); + const typing = messageText !== ''; + this.setState({messageText, typing}); const draft = PostStore.getCurrentDraft(); draft.message = messageText; @@ -365,7 +367,7 @@ class CreatePost extends React.Component { if (this.state.channelId !== channelId) { const draft = this.getCurrentDraft(); - this.setState({channelId, messageText: draft.messageText, initialText: draft.messageText, submitting: false, serverError: null, postError: null, previews: draft.previews, uploadsInProgress: draft.uploadsInProgress}); + this.setState({channelId, messageText: draft.messageText, initialText: draft.messageText, submitting: false, typing: false, serverError: null, postError: null, previews: draft.previews, uploadsInProgress: draft.uploadsInProgress}); } } @@ -516,6 +518,7 @@ class CreatePost extends React.Component { onKeyPress={this.postMsgKeyPress} onKeyDown={this.handleKeyDown} messageText={this.state.messageText} + typing={this.state.typing} createMessage={this.props.intl.formatMessage(holders.write)} channelId={this.state.channelId} id='post_textbox' diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx index 0c7b8d672..4bd23a26d 100644 --- a/webapp/components/edit_post_modal.jsx +++ b/webapp/components/edit_post_modal.jsx @@ -38,7 +38,7 @@ class EditPostModal extends React.Component { this.handleKeyDown = this.handleKeyDown.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); - this.state = {editText: '', originalText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''}; + this.state = {editText: '', originalText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: '', typing: false}; } handleEdit() { var updatedPost = {}; @@ -78,7 +78,8 @@ class EditPostModal extends React.Component { $('#edit_post').modal('hide'); } handleEditInput(editMessage) { - this.setState({editText: editMessage}); + const typing = editMessage !== ''; + this.setState({editText: editMessage, typing}); } handleEditKeyPress(e) { if (!this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { @@ -99,7 +100,8 @@ class EditPostModal extends React.Component { post_id: options.postId || '', channel_id: options.channelId || '', comments: options.comments || 0, - refocusId: options.refocusId || '' + refocusId: options.refocusId || '', + typing: false }); $(ReactDOM.findDOMNode(this.refs.modal)).modal('show'); @@ -118,7 +120,7 @@ class EditPostModal extends React.Component { var self = this; $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', () => { - self.setState({editText: '', originalText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: ''}); + self.setState({editText: '', originalText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: '', typing: false}); }); $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', (e) => { @@ -133,7 +135,8 @@ class EditPostModal extends React.Component { channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), - refocusId: $(button).attr('data-refocusid') + refocusId: $(button).attr('data-refocusid'), + typing: false }); }); @@ -199,6 +202,7 @@ class EditPostModal extends React.Component { onKeyPress={this.handleEditKeyPress} onKeyDown={this.handleKeyDown} messageText={this.state.editText} + typing={this.state.typing} createMessage={this.props.intl.formatMessage(holders.editPost)} supportsCommands={false} id='edit_textbox' diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx index 0ed9449ed..6260e179c 100644 --- a/webapp/components/suggestion/suggestion_box.jsx +++ b/webapp/components/suggestion/suggestion_box.jsx @@ -84,10 +84,8 @@ export default class SuggestionBox extends React.Component { handleCompleteWord(term, matchedPretext) { const textbox = ReactDOM.findDOMNode(this.refs.textbox); const caret = Utils.getCaretPosition(textbox); - - const text = this.props.value; + const text = textbox.value; const pretext = text.substring(0, caret); - let prefix; if (pretext.endsWith(matchedPretext)) { prefix = pretext.substring(0, pretext.length - matchedPretext.length); @@ -104,6 +102,7 @@ export default class SuggestionBox extends React.Component { if (this.props.onUserInput) { this.props.onUserInput(prefix + term + ' ' + suffix); } + this.refs.textbox.value = (prefix + term + ' ' + suffix); // set the caret position after the next rendering window.requestAnimationFrame(() => { diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index 7f5ecea09..41db38837 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -176,6 +176,11 @@ export default class Textbox extends React.Component { ); + const otherProps = {}; + if (!this.props.typing) { + otherProps.value = this.props.messageText; + } + return (