diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 8c49315e76..9e7c675155 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -51,6 +51,7 @@ class CreateComment extends React.Component { this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this); this.handleUserInput = this.handleUserInput.bind(this); this.handleKeyDown = this.handleKeyDown.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); @@ -74,6 +75,8 @@ class CreateComment extends React.Component { componentDidMount() { PreferenceStore.addChangeListener(this.onPreferenceChange); window.addEventListener('resize', this.handleResize); + + this.refs.textbox.focus(); } componentWillUnmount() { PreferenceStore.removeChangeListener(this.onPreferenceChange); @@ -94,6 +97,10 @@ class CreateComment extends React.Component { $('.post-right__scroll').perfectScrollbar('update'); } } + + if (prevProps.rootId !== this.props.rootId) { + this.refs.textbox.focus(); + } } handleSubmit(e) { e.preventDefault(); @@ -218,6 +225,9 @@ class CreateComment extends React.Component { }); } } + handleUploadClick() { + this.refs.textbox.focus(); + } handleUploadStart(clientIds) { let draft = PostStore.getCommentDraft(this.props.rootId); @@ -225,6 +235,10 @@ class CreateComment extends React.Component { PostStore.storeCommentDraft(this.props.rootId, draft); this.setState({uploadsInProgress: draft.uploadsInProgress}); + + // this is a bit redundant with the code that sets focus when the file input is clicked, + // but this also resets the focus after a drag and drop + this.refs.textbox.focus(); } handleFileUploadComplete(filenames, clientIds) { let draft = PostStore.getCommentDraft(this.props.rootId); @@ -365,6 +379,7 @@ class CreateComment extends React.Component { 960) { - $('#post_textbox').focus(); - } + handleUploadClick() { + this.refs.textbox.focus(); } handleUploadStart(clientIds, channelId) { const draft = PostStore.getDraft(channelId); @@ -252,6 +225,10 @@ class CreatePost extends React.Component { PostStore.storeDraft(channelId, draft); this.setState({uploadsInProgress: draft.uploadsInProgress}); + + // this is a bit redundant with the code that sets focus when the file input is clicked, + // but this also resets the focus after a drag and drop + this.refs.textbox.focus(); } handleFileUploadComplete(filenames, clientIds, channelId) { const draft = PostStore.getDraft(channelId); @@ -328,13 +305,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(); @@ -457,7 +437,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} @@ -467,6 +446,7 @@ class CreatePost extends React.Component { @@ -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, diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index 00e5ace980..ec299087d3 100644 --- a/web/react/components/textbox.jsx +++ b/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