From 8f3c32e29cf13a84b2f0a58da0ab0c99a88caad5 Mon Sep 17 00:00:00 2001 From: Jeong Arm Date: Wed, 5 Jun 2019 22:29:45 +0900 Subject: [PATCH] Scroll to compose form when focus (#10970) * Scroll to compose form when focus * Get rid of constructor --- .../mastodon/components/autosuggest_textarea.js | 5 ++++- .../features/compose/components/compose_form.js | 11 ++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index 5cad43e821..4c50294bae 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -138,8 +138,11 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { this.setState({ suggestionsHidden: true, focused: false }); } - onFocus = () => { + onFocus = (e) => { this.setState({ focused: true }); + if (this.props.onFocus) { + this.props.onFocus(e); + } } onSuggestionClick = (e) => { diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js index eff193929d..fb0c75fd36 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.js +++ b/app/javascript/mastodon/features/compose/components/compose_form.js @@ -33,6 +33,10 @@ const messages = defineMessages({ export default @injectIntl class ComposeForm extends ImmutablePureComponent { + setRef = c => { + this.composeForm = c; + }; + static contextTypes = { router: PropTypes.object, }; @@ -114,6 +118,10 @@ class ComposeForm extends ImmutablePureComponent { this.props.onChangeSpoilerText(e.target.value); } + handleFocus = () => { + this.composeForm.scrollIntoView(); + } + componentDidUpdate (prevProps) { // This statement does several things: // - If we're beginning a reply, and, @@ -177,7 +185,7 @@ class ComposeForm extends ImmutablePureComponent { } return ( -
+
@@ -211,6 +219,7 @@ class ComposeForm extends ImmutablePureComponent { value={this.props.text} onChange={this.handleChange} suggestions={this.props.suggestions} + onFocus={this.handleFocus} onKeyDown={this.handleKeyDown} onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested}