PLT-3056 Fix Unable to type quickly in post textbox in IE11 (#3249)

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}

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'

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'

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(() => {

webapp/components/textbox.jsx

@@ -176,6 +176,11 @@ export default class Textbox extends React.Component {
             </div>
         );
 
+        const otherProps = {};
+        if (!this.props.typing) {
+            otherProps.value = this.props.messageText;
+        }
+
         return (
             <div
                 ref='wrapper'
@@ -189,7 +194,6 @@ export default class Textbox extends React.Component {
                     spellCheck='true'
                     maxLength={Constants.MAX_POST_LEN}
                     placeholder={this.props.createMessage}
-                    value={this.props.messageText}
                     onUserInput={this.props.onUserInput}
                     onKeyPress={this.handleKeyPress}
                     onKeyDown={this.handleKeyDown}
@@ -198,6 +202,7 @@ export default class Textbox extends React.Component {
                     listComponent={SuggestionList}
                     providers={this.suggestionProviders}
                     channelId={this.props.channelId}
+                    {...otherProps}
                 />
                 <div
                     ref='preview'
@@ -238,5 +243,6 @@ Textbox.propTypes = {
     onKeyPress: React.PropTypes.func.isRequired,
     createMessage: React.PropTypes.string.isRequired,
     onKeyDown: React.PropTypes.func,
-    supportsCommands: React.PropTypes.bool.isRequired
+    supportsCommands: React.PropTypes.bool.isRequired,
+    typing: React.PropTypes.bool.isRequired
 };