forked from treehouse/mastodon
Scroll into search bar when focus (#12032)
parent
b85fb6b5e7
commit
66fda37fd0
|
@ -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)}
|
||||||
|
|
Loading…
Reference in New Issue