granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Autofocus search input field

Browse source
This commit is contained in:
Justin Edmund 2020-09-18 06:24:42 -07:00
parent f0a780f23f
commit 22a8b2896d
1 changed files with 34 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/SearchModal/SearchModal.tsx
View file

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import Portal from '~utils/Portal' import { createPortal } from 'react-dom'
import api from '~utils/api' import api from '~utils/api'
import Modal from '~components/Modal/Modal' import Modal from '~components/Modal/Modal'
@ -24,7 +24,7 @@ interface State {
} }
class SearchModal extends React.Component<Props, State> { class SearchModal extends React.Component<Props, State> {
searchQuery searchInput: React.RefObject<HTMLInputElement>
constructor(props: Props) { constructor(props: Props) {
super(props) super(props)
@ -35,6 +35,13 @@ class SearchModal extends React.Component<Props, State> {
message: '', message: '',
totalResults: 0 totalResults: 0
} }
this.searchInput = React.createRef<HTMLInputElement>()
}
componentDidMount() {
if (this.searchInput.current) {
this.searchInput.current.focus()
}
} }
fetchResults = (query: string) => { fetchResults = (query: string) => {
@ -89,28 +96,32 @@ class SearchModal extends React.Component<Props, State> {
const { query, loading } = this.state const { query, loading } = this.state
return ( return (
<Portal key="search_portal"> createPortal(
<Modal styleName="SearchModal" key="search_modal"> <div>
<div id="input_container"> <Modal styleName="SearchModal" key="search_modal">
<label className="search_label" htmlFor="search_input"> <div id="input_container">
<input <label className="search_label" htmlFor="search_input">
autoComplete="off" <input
type="text" autoComplete="off"
name="query" type="text"
className="Input" name="query"
id="search_input" className="Input"
value={query} id="search_input"
placeholder={this.props.placeholderText} ref={this.searchInput}
onChange={this.inputChanged} value={query}
/> placeholder={this.props.placeholderText}
</label> onChange={this.inputChanged}
</div> />
</label>
</div>
{ this.renderSearchResults() } { this.renderSearchResults() }
</Modal> </Modal>
<Overlay onClick={this.props.close} /> <Overlay onClick={this.props.close} />
</Portal> </div>,
document.body
)
) )
} }
} }