Autofocus search input field

src/components/SearchModal/SearchModal.tsx

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