From 66fda37fd04de989d12f3f4c565ba5bfc6ee189d Mon Sep 17 00:00:00 2001 From: Jeong Arm 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 7f9edfeee30..3e36a922be6 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 {