Cleaned up textbox focus code

web/react/components/create_post.jsx

@@ -57,7 +57,7 @@ class CreatePost extends React.Component {
         this.handleSubmit = this.handleSubmit.bind(this);
         this.postMsgKeyPress = this.postMsgKeyPress.bind(this);
         this.handleUserInput = this.handleUserInput.bind(this);
-        this.resizePostHolder = this.resizePostHolder.bind(this);
+        this.handleUploadClick = this.handleUploadClick.bind(this);
         this.handleUploadStart = this.handleUploadStart.bind(this);
         this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
         this.handleUploadError = this.handleUploadError.bind(this);
@@ -66,7 +66,6 @@ class CreatePost extends React.Component {
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleResize = this.handleResize.bind(this);
         this.sendMessage = this.sendMessage.bind(this);
 
         PostStore.clearDraftUploads();
@@ -81,34 +80,10 @@ class CreatePost extends React.Component {
             previews: draft.previews,
             submitting: false,
             initialText: draft.messageText,
-            windowWidth: Utils.windowWidth(),
-            windowHeight: Utils.windowHeight(),
             ctrlSend: false,
             showTutorialTip: false
         };
     }
-    handleResize() {
-        this.setState({
-            windowWidth: Utils.windowWidth(),
-            windowHeight: Utils.windowHeight()
-        });
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.previews.length !== this.state.previews.length) {
-            this.resizePostHolder();
-            return;
-        }
-
-        if (prevState.uploadsInProgress !== this.state.uploadsInProgress) {
-            this.resizePostHolder();
-            return;
-        }
-
-        if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeight) {
-            this.resizePostHolder();
-            return;
-        }
-    }
     getCurrentDraft() {
         const draft = PostStore.getCurrentDraft();
         const safeDraft = {previews: [], messageText: '', uploadsInProgress: []};
@@ -245,10 +220,8 @@ class CreatePost extends React.Component {
         draft.message = messageText;
         PostStore.storeCurrentDraft(draft);
     }
-    resizePostHolder() {
-        if (this.state.windowWidth > 960) {
-            $('#post_textbox').focus();
-        }
+    handleUploadClick() {
+        this.refs.textbox.focus();
     }
     handleUploadStart(clientIds, channelId) {
         const draft = PostStore.getDraft(channelId);
@@ -333,13 +306,16 @@ class CreatePost extends React.Component {
     componentDidMount() {
         ChannelStore.addChangeListener(this.onChange);
         PreferenceStore.addChangeListener(this.onPreferenceChange);
-        this.resizePostHolder();
-        window.addEventListener('resize', this.handleResize);
+        this.refs.textbox.focus();
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.channelId !== this.state.channelId) {
+            this.refs.textbox.focus();
+        }
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onChange);
         PreferenceStore.removeChangeListener(this.onPreferenceChange);
-        window.removeEventListener('resize', this.handleResize);
     }
     onChange() {
         const channelId = ChannelStore.getCurrentId();
@@ -462,7 +438,6 @@ class CreatePost extends React.Component {
                                 onUserInput={this.handleUserInput}
                                 onKeyPress={this.postMsgKeyPress}
                                 onKeyDown={this.handleKeyDown}
-                                onHeightChange={this.resizePostHolder}
                                 messageText={this.state.messageText}
                                 createMessage={this.props.intl.formatMessage(holders.write)}
                                 channelId={this.state.channelId}
@@ -472,6 +447,7 @@ class CreatePost extends React.Component {
                             <FileUpload
                                 ref='fileUpload'
                                 getFileCount={this.getFileCount}
+                                onClick={this.handleUploadClick}
                                 onUploadStart={this.handleUploadStart}
                                 onFileUpload={this.handleFileUploadComplete}
                                 onUploadError={this.handleUploadError}
@@ -506,4 +482,4 @@ CreatePost.propTypes = {
     intl: intlShape.isRequired
 };
 
-export default injectIntl(CreatePost);
+export default injectIntl(CreatePost);

web/react/components/file_upload.jsx

@@ -310,6 +310,7 @@ class FileUpload extends React.Component {
                     ref='fileInput'
                     type='file'
                     onChange={this.handleChange}
+                    onClick={this.props.onClick}
                     multiple={multiple}
                     accept={accept}
                 />
@@ -322,6 +323,7 @@ FileUpload.propTypes = {
     intl: intlShape.isRequired,
     onUploadError: React.PropTypes.func,
     getFileCount: React.PropTypes.func,
+    onClick: React.PropTypes.func,
     onFileUpload: React.PropTypes.func,
     onUploadStart: React.PropTypes.func,
     onTextDrop: React.PropTypes.func,

web/react/components/textbox.jsx

@@ -20,6 +20,7 @@ export default class Textbox extends React.Component {
     constructor(props) {
         super(props);
 
+        this.focus = this.focus.bind(this);
         this.getStateFromStores = this.getStateFromStores.bind(this);
         this.onRecievedError = this.onRecievedError.bind(this);
         this.handleKeyPress = this.handleKeyPress.bind(this);
@@ -81,6 +82,10 @@ export default class Textbox extends React.Component {
         }
     }
 
+    focus() {
+        this.refs.message.getTextbox().focus();
+    }
+
     resize() {
         const textbox = this.refs.message.getTextbox();
         const $textbox = $(textbox);
@@ -90,8 +95,6 @@ export default class Textbox extends React.Component {
         const borders = parseInt($textbox.css('border-bottom-width'), 10) + parseInt($textbox.css('border-top-width'), 10);
         const maxHeight = parseInt($textbox.css('max-height'), 10) - borders;
 
-        const prevHeight = $textbox.height();
-
         // set the height to auto and remove the scrollbar so we can get the actual size of the contents
         $textbox.css('height', 'auto').css('overflow-y', 'hidden');
 
@@ -116,10 +119,6 @@ export default class Textbox extends React.Component {
         if (this.state.preview) {
             $(ReactDOM.findDOMNode(this.refs.preview)).height(height + borders);
         }
-
-        if (height !== prevHeight && this.props.onHeightChange) {
-            this.props.onHeightChange();
-        }
     }
 
     showPreview(e) {
@@ -211,7 +210,6 @@ Textbox.propTypes = {
     messageText: React.PropTypes.string.isRequired,
     onUserInput: React.PropTypes.func.isRequired,
     onKeyPress: React.PropTypes.func.isRequired,
-    onHeightChange: React.PropTypes.func,
     createMessage: React.PropTypes.string.isRequired,
     onKeyDown: React.PropTypes.func,
     supportsCommands: React.PropTypes.bool.isRequired