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

19
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,7 +96,8 @@ class SearchModal extends React.Component<Props, State> {
const { query, loading } = this.state const { query, loading } = this.state
return ( return (
<Portal key="search_portal"> createPortal(
<div>
<Modal styleName="SearchModal" key="search_modal"> <Modal styleName="SearchModal" key="search_modal">
<div id="input_container"> <div id="input_container">
<label className="search_label" htmlFor="search_input"> <label className="search_label" htmlFor="search_input">
@ -99,6 +107,7 @@ class SearchModal extends React.Component<Props, State> {
name="query" name="query"
className="Input" className="Input"
id="search_input" id="search_input"
ref={this.searchInput}
value={query} value={query}
placeholder={this.props.placeholderText} placeholder={this.props.placeholderText}
onChange={this.inputChanged} onChange={this.inputChanged}
@ -110,7 +119,9 @@ class SearchModal extends React.Component<Props, State> {
</Modal> </Modal>
<Overlay onClick={this.props.close} /> <Overlay onClick={this.props.close} />
</Portal> </div>,
document.body
)
) )
} }
} }