PLT-4404 Replace calls to onInput with onChange to better support IE11 (#4315)

* Replace calls to onInput with onChange to better support IE11

* Replaced react-textarea-autosize with react-autosize-textarea

8 files changed, 30 insertions, 30 deletions

diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx
index 17193d196..063962a18 100644
--- a/webapp/components/channel_switch_modal.jsx
+++ b/webapp/components/channel_switch_modal.jsx
@@ -23,7 +23,7 @@ export default class SwitchChannelModal extends React.Component {
     constructor() {
         super();
 
-        this.onInput = this.onInput.bind(this);
+        this.onChange = this.onChange.bind(this);
         this.onShow = this.onShow.bind(this);
         this.onHide = this.onHide.bind(this);
         this.onExited = this.onExited.bind(this);
@@ -68,7 +68,7 @@ export default class SwitchChannelModal extends React.Component {
         });
     }
 
-    onInput(e) {
+    onChange(e) {
         this.setState({text: e.target.value});
     }
 
@@ -152,7 +152,7 @@ export default class SwitchChannelModal extends React.Component {
                         ref='search'
                         className='form-control focused'
                         type='input'
-                        onInput={this.onInput}
+                        onChange={this.onChange}
                         value={this.state.text}
                         onKeyDown={this.handleKeyDown}
                         listComponent={SuggestionList}
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 1783f4d90..4b5134d23 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -35,7 +35,7 @@ export default class CreateComment extends React.Component {
 
         this.handleSubmit = this.handleSubmit.bind(this);
         this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this);
-        this.handleInput = this.handleInput.bind(this);
+        this.handleChange = this.handleChange.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleUploadClick = this.handleUploadClick.bind(this);
         this.handleUploadStart = this.handleUploadStart.bind(this);
@@ -180,7 +180,7 @@ export default class CreateComment extends React.Component {
         GlobalActions.emitLocalUserTypingEvent(this.props.channelId, this.props.rootId);
     }
 
-    handleInput(e) {
+    handleChange(e) {
         const messageText = e.target.value;
 
         const draft = PostStore.getCommentDraft(this.props.rootId);
@@ -393,7 +393,7 @@ export default class CreateComment extends React.Component {
                     >
                         <div className='post-body__cell'>
                             <Textbox
-                                onInput={this.handleInput}
+                                onChange={this.handleChange}
                                 onKeyPress={this.commentMsgKeyPress}
                                 onKeyDown={this.handleKeyDown}
                                 messageText={this.state.messageText}
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index 232edaa0c..ae25fc74e 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -43,7 +43,7 @@ export default class CreatePost extends React.Component {
         this.getCurrentDraft = this.getCurrentDraft.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.postMsgKeyPress = this.postMsgKeyPress.bind(this);
-        this.handleInput = this.handleInput.bind(this);
+        this.handleChange = this.handleChange.bind(this);
         this.handleUploadClick = this.handleUploadClick.bind(this);
         this.handleUploadStart = this.handleUploadStart.bind(this);
         this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
@@ -210,7 +210,7 @@ export default class CreatePost extends React.Component {
         GlobalActions.emitLocalUserTypingEvent(this.state.channelId, '');
     }
 
-    handleInput(e) {
+    handleChange(e) {
         const messageText = e.target.value;
         this.setState({messageText});
 
@@ -512,7 +512,7 @@ export default class CreatePost extends React.Component {
                     <div className='post-create-body'>
                         <div className='post-body__cell'>
                             <Textbox
-                                onInput={this.handleInput}
+                                onChange={this.handleChange}
                                 onKeyPress={this.postMsgKeyPress}
                                 onKeyDown={this.handleKeyDown}
                                 messageText={this.state.messageText}
diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx
index 263fd31c2..2e2f208e6 100644
--- a/webapp/components/edit_post_modal.jsx
+++ b/webapp/components/edit_post_modal.jsx
@@ -31,7 +31,7 @@ export default class EditPostModal extends React.Component {
         this.handleEditKeyPress = this.handleEditKeyPress.bind(this);
         this.handleEditPostEvent = this.handleEditPostEvent.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleInput = this.handleInput.bind(this);
+        this.handleChange = this.handleChange.bind(this);
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.onModalHidden = this.onModalHidden.bind(this);
         this.onModalShow = this.onModalShow.bind(this);
@@ -89,7 +89,7 @@ export default class EditPostModal extends React.Component {
         $('#edit_post').modal('hide');
     }
 
-    handleInput(e) {
+    handleChange(e) {
         this.setState({
             editText: e.target.value
         });
@@ -230,7 +230,7 @@ export default class EditPostModal extends React.Component {
                         </div>
                         <div className='edit-modal-body modal-body'>
                             <Textbox
-                                onInput={this.handleInput}
+                                onChange={this.handleChange}
                                 onKeyPress={this.handleEditKeyPress}
                                 onKeyDown={this.handleKeyDown}
                                 messageText={this.state.editText}
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index dc00095ed..5cc0e7c23 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -27,7 +27,7 @@ export default class SearchBar extends React.Component {
         this.mounted = false;
 
         this.onListenerChange = this.onListenerChange.bind(this);
-        this.handleInput = this.handleInput.bind(this);
+        this.handleChange = this.handleChange.bind(this);
         this.handleUserFocus = this.handleUserFocus.bind(this);
         this.handleUserBlur = this.handleUserBlur.bind(this);
         this.performSearch = this.performSearch.bind(this);
@@ -94,7 +94,7 @@ export default class SearchBar extends React.Component {
         });
     }
 
-    handleInput(e) {
+    handleChange(e) {
         var term = e.target.value;
         SearchStore.storeSearchTerm(term);
         SearchStore.emitSearchTermChange(false);
@@ -188,7 +188,7 @@ export default class SearchBar extends React.Component {
                         value={this.state.searchTerm}
                         onFocus={this.handleUserFocus}
                         onBlur={this.handleUserBlur}
-                        onInput={this.handleInput}
+                        onChange={this.handleChange}
                         listComponent={SearchSuggestionList}
                         providers={this.suggestionProviders}
                         type='search'
diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index 02911c30f..eb13686bb 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -9,7 +9,7 @@ import * as GlobalActions from 'actions/global_actions.jsx';
 import SuggestionStore from 'stores/suggestion_store.jsx';
 import * as Utils from 'utils/utils.jsx';
 
-import TextareaAutosize from 'react-textarea-autosize';
+import TextareaAutosize from 'react-autosize-textarea';
 
 const KeyCodes = Constants.KeyCodes;
 
@@ -22,7 +22,7 @@ export default class SuggestionBox extends React.Component {
         this.handleDocumentClick = this.handleDocumentClick.bind(this);
 
         this.handleCompleteWord = this.handleCompleteWord.bind(this);
-        this.handleInput = this.handleInput.bind(this);
+        this.handleChange = this.handleChange.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handlePretextChanged = this.handlePretextChanged.bind(this);
 
@@ -70,15 +70,15 @@ export default class SuggestionBox extends React.Component {
         }
     }
 
-    handleInput(e) {
+    handleChange(e) {
         const textbox = ReactDOM.findDOMNode(this.refs.textbox);
         const caret = Utils.getCaretPosition(textbox);
         const pretext = textbox.value.substring(0, caret);
 
         GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext);
 
-        if (this.props.onInput) {
-            this.props.onInput(e);
+        if (this.props.onChange) {
+            this.props.onChange(e);
         }
     }
 
@@ -103,14 +103,14 @@ export default class SuggestionBox extends React.Component {
 
         this.refs.textbox.value = prefix + term + ' ' + suffix;
 
-        if (this.props.onInput) {
+        if (this.props.onChange) {
             // fake an input event to send back to parent components
             const e = {
                 target: this.refs.textbox
             };
 
-            // don't call handleInput or we'll get into an event loop
-            this.props.onInput(e);
+            // don't call handleChange or we'll get into an event loop
+            this.props.onChange(e);
         }
 
         textbox.focus();
@@ -157,7 +157,7 @@ export default class SuggestionBox extends React.Component {
                     ref='textbox'
                     type='text'
                     {...this.props}
-                    onInput={this.handleInput}
+                    onChange={this.handleChange}
                     onKeyDown={this.handleKeyDown}
                 />
             );
@@ -167,7 +167,7 @@ export default class SuggestionBox extends React.Component {
                     ref='textbox'
                     type='search'
                     {...this.props}
-                    onInput={this.handleInput}
+                    onChange={this.handleChange}
                     onKeyDown={this.handleKeyDown}
                 />
             );
@@ -177,7 +177,7 @@ export default class SuggestionBox extends React.Component {
                     id={this.suggestionId}
                     ref='textbox'
                     {...this.props}
-                    onInput={this.handleInput}
+                    onChange={this.handleChange}
                     onKeyDown={this.handleKeyDown}
                 />
             );
@@ -226,6 +226,6 @@ SuggestionBox.propTypes = {
     renderDividers: React.PropTypes.bool,
 
     // explicitly name any input event handlers we override and need to manually call
-    onInput: React.PropTypes.func,
+    onChange: React.PropTypes.func,
     onKeyDown: React.PropTypes.func
 };
diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx
index 44468a67a..bf87d4d45 100644
--- a/webapp/components/textbox.jsx
+++ b/webapp/components/textbox.jsx
@@ -206,7 +206,7 @@ export default class Textbox extends React.Component {
                     spellCheck='true'
                     maxLength={Constants.MAX_POST_LEN}
                     placeholder={this.props.createMessage}
-                    onInput={this.props.onInput}
+                    onChange={this.props.onChange}
                     onKeyPress={this.handleKeyPress}
                     onKeyDown={this.handleKeyDown}
                     onHeightChange={this.handleHeightChange}
@@ -251,7 +251,7 @@ Textbox.propTypes = {
     id: React.PropTypes.string.isRequired,
     channelId: React.PropTypes.string,
     messageText: React.PropTypes.string.isRequired,
-    onInput: React.PropTypes.func.isRequired,
+    onChange: React.PropTypes.func.isRequired,
     onKeyPress: React.PropTypes.func.isRequired,
     createMessage: React.PropTypes.string.isRequired,
     onKeyDown: React.PropTypes.func,
diff --git a/webapp/package.json b/webapp/package.json
index 3a38661d1..6e4a7c17a 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -24,13 +24,13 @@
     "perfect-scrollbar": "0.6.12",
     "react": "15.3.2",
     "react-addons-pure-render-mixin": "15.3.2",
+    "react-autosize-textarea": "0.3.3",
     "react-bootstrap": "0.30.3",
     "react-custom-scrollbars": "4.0.0",
     "react-dom": "15.3.2",
     "react-intl": "2.1.5",
     "react-router": "2.8.1",
     "react-select": "1.0.0-rc.2",
-    "react-textarea-autosize": "4.0.5",
     "superagent": "2.3.0",
     "twemoji": "2.2.0",
     "velocity-animate": "1.2.3",