about summary refs log tree commit diff
diff options
context:
space:
mode:
authorJeong Arm <kjwonmail@gmail.com>2019-10-02 02:19:10 +0900
committerEugen Rochko <eugen@zeonfederated.com>2019-10-01 19:19:10 +0200
commit66fda37fd04de989d12f3f4c565ba5bfc6ee189d (patch)
tree1379246875db1c3540def1dfa5336432ff68222d
parentb85fb6b5e76870734bfc9a2d00e6270fd5d84d5d (diff)
Scroll into search bar when focus (#12032)
-rw-r--r--app/javascript/mastodon/features/compose/components/search.js13
1 files changed, 13 insertions, 0 deletions
diff --git a/app/javascript/mastodon/features/compose/components/search.js b/app/javascript/mastodon/features/compose/components/search.js
index 7f9edfeee..3e36a922b 100644
--- a/app/javascript/mastodon/features/compose/components/search.js
+++ b/app/javascript/mastodon/features/compose/components/search.js
@@ -60,12 +60,17 @@ class Search extends React.PureComponent {
     onShow: PropTypes.func.isRequired,
     openInRoute: PropTypes.bool,
     intl: PropTypes.object.isRequired,
+    singleColumn: PropTypes.bool,
   };
 
   state = {
     expanded: false,
   };
 
+  setRef = c => {
+    this.searchForm = c;
+  }
+
   handleChange = (e) => {
     this.props.onChange(e.target.value);
   }
@@ -95,6 +100,13 @@ class Search extends React.PureComponent {
   handleFocus = () => {
     this.setState({ expanded: true });
     this.props.onShow();
+
+    if (this.searchForm && !this.props.singleColumn) {
+      const { left, right } = this.searchForm.getBoundingClientRect();
+      if (left < 0 || right > (window.innerWidth || document.documentElement.clientWidth)) {
+        this.searchForm.scrollIntoView();
+      }
+    }
   }
 
   handleBlur = () => {
@@ -111,6 +123,7 @@ class Search extends React.PureComponent {
         <label>
           <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
           <input
+            ref={this.setRef}
             className='search__input'
             type='text'
             placeholder={intl.formatMessage(messages.placeholder)}