[Glitch] Scroll into search bar when focus
Port 66fda37fd0
to glitch-soc
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
pull/1228/head
parent
79388a52aa
commit
c274774d06
|
@ -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)}
|
||||
|
|
Loading…
Reference in New Issue