tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

[Glitch] Scroll into search bar when focus

Browse Source 
Port 66fda37fd0 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Jeong Arm 2019-10-02 02:19:10 +09:00 committed by Thibaut Girka
parent 79388a52aa
commit c274774d06
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/flavours/glitch/features/compose/components/search.js
View File

@ -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)}