From 66fda37fd04de989d12f3f4c565ba5bfc6ee189d Mon Sep 17 00:00:00 2001
From: Jeong Arm <kjwonmail@gmail.com>
Date: Wed, 2 Oct 2019 02:19:10 +0900
Subject: [PATCH] Scroll into search bar when focus (#12032)
---
.../mastodon/features/compose/components/search.js | 13 +++++++++++++
1 file changed, 13 insertions(+)
diff --git a/app/javascript/mastodon/features/compose/components/search.js b/app/javascript/mastodon/features/compose/components/search.js
index 7f9edfeee3..3e36a922be 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)}
--
GitLab