about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorJeong Arm <kjwonmail@gmail.com>2019-06-05 22:29:45 +0900
committermultiple creatures <dev@multiple-creature.party>2019-11-19 16:37:35 -0600
commit168b4cf1b04b4d09dfe92f2f60fe0cab50cd2dcb (patch)
treef7247b3e55a8caf9ab68c7e937174a8884b3e6be /app/javascript
parent176b48c6dc2e67b935996ef2ada1e71fb36f9f87 (diff)
Scroll to compose form when focus (#10970)
* Scroll to compose form when focus

* Get rid of constructor
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/mastodon/components/autosuggest_textarea.js5
-rw-r--r--app/javascript/mastodon/features/compose/components/compose_form.js11
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 5cad43e82..4c50294ba 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 ff6c521f2..8c6e4f158 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -34,6 +34,10 @@ const messages = defineMessages({
 export default @injectIntl
 class ComposeForm extends ImmutablePureComponent {
 
+  setRef = c => {
+    this.composeForm = c;
+  };
+
   static contextTypes = {
     router: PropTypes.object,
   };
@@ -115,6 +119,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,
@@ -178,7 +186,7 @@ class ComposeForm extends ImmutablePureComponent {
     }
 
     return (
-      <div className='compose-form'>
+      <div className='compose-form' ref={this.setRef}>
         <WarningContainer />
 
         <ReplyIndicatorContainer />
@@ -212,6 +220,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}