From 91ae2d12759e8980c2d6194754684a233a37594a Mon Sep 17 00:00:00 2001
From: Jeong Arm <kjwonmail@gmail.com>
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 (
-      <div className='compose-form'>
+      <div className='compose-form' ref={this.setRef}>
         <WarningContainer />
 
         <ReplyIndicatorContainer />
@@ -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}