cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Scroll into search bar when focus (#12032)

This commit is contained in:
Jeong Arm 2019-10-02 02:19:10 +09:00 committed by Eugen Rochko
parent b85fb6b5e7
commit 66fda37fd0
1 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/javascript/mastodon/features/compose/components/search.js
View File

@ -60,12 +60,17 @@ class Search extends React.PureComponent {
onShow: PropTypes.func.isRequired, onShow: PropTypes.func.isRequired,
openInRoute: PropTypes.bool, openInRoute: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
singleColumn: PropTypes.bool,
}; };
state = { state = {
expanded: false, expanded: false,
}; };
setRef = c => {
this.searchForm = c;
}
handleChange = (e) => { handleChange = (e) => {
this.props.onChange(e.target.value); this.props.onChange(e.target.value);
} }
@ -95,6 +100,13 @@ class Search extends React.PureComponent {
handleFocus = () => { handleFocus = () => {
this.setState({ expanded: true }); this.setState({ expanded: true });
this.props.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();
}
}
} }
handleBlur = () => { handleBlur = () => {
@ -111,6 +123,7 @@ class Search extends React.PureComponent {
<label> <label>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span> <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
<input <input
ref={this.setRef}
className='search__input' className='search__input'
type='text' type='text'
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}