about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features
diff options
context:
space:
mode:
authorJeong Arm <kjwonmail@gmail.com>2019-10-02 02:19:10 +0900
committerThibaut Girka <thib@sitedethib.com>2019-10-04 19:22:11 +0200
commitc274774d062542ab6bc5ec7e9cf3d8e28bd9aa3e (patch)
tree9d1339557b7f07ac68fd0745ead2606bc9048a3b /app/javascript/flavours/glitch/features
parent79388a52aacbea864df2c6562bba2241470fa1ad (diff)
[Glitch] Scroll into search bar when focus
Port 66fda37fd04de989d12f3f4c565ba5bfc6ee189d to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features')
-rw-r--r--app/javascript/flavours/glitch/features/compose/components/search.js16
1 files changed, 13 insertions, 3 deletions
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.js b/app/javascript/flavours/glitch/features/compose/components/search.js
index 29d195ecd..12d839637 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.js
+++ b/app/javascript/flavours/glitch/features/compose/components/search.js
@@ -73,12 +73,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) => {
     const { onChange } = this.props;
     if (onChange) {
@@ -103,10 +108,14 @@ class Search extends React.PureComponent {
   }
 
   handleFocus = () => {
-    const { onShow } = this.props;
     this.setState({ expanded: true });
-    if (onShow) {
-      onShow();
+    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();
+      }
     }
   }
 
@@ -135,6 +144,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)}