Use autofocus HTML attribute instead of a useEffect hook

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ### 1.1.2 (15 Mar 2022)
 
+- Use autofocus HTML attribute instead of a useEffect hook
+- Add MIT License
 - Add precommit hooks for test and lint
 - Ensure a no-items message is displayed if a query is entered but no items have ever been loaded
 - Do not do any text matching in default listbox

src/lib/components/__snapshots__/container.test.jsx.snap

@@ -14,6 +14,7 @@ exports[`Container > Component renders correctly 1`] = `
     autoCapitalize="off"
     autoComplete="off"
     autoCorrect="off"
+    autoFocus={true}
     className="query-class"
     id="autocomplete"
     onBlur={[Function]}

src/lib/components/container.jsx

@@ -10,7 +10,6 @@ import defaultStyles from './styles/container.styles.js'
 import {
   useItemsState,
   useItemsError,
-  useAutoFocus,
   useQueryChange,
   useHighlight,
   useSelected
@@ -119,9 +118,6 @@ export default function Container(props) {
   // Store retrieved error if there is one
   useItemsError(swrResult.error)
 
-  // Autofocus on render if prop is true
-  useAutoFocus(queryInput, autoFocus)
-
   // As soon as the query state changes (ignoring debounce) update the
   // typeahead value and the query value and fire onChange
   useQueryChange(state.query, queryInput, typeaheadInput, onChange)
@@ -230,6 +226,7 @@ export default function Container(props) {
           disabled={disabled}
           placeholder={placeholder}
           type='text'
+          autoFocus={autoFocus}
           autoComplete='off'
           autoCorrect='off'
           autoCapitalize='off'

src/lib/components/hooks/containerEffects.js

@@ -22,12 +22,6 @@ export const useItemsError = (error) => {
   }, [error, dispatch])
 }
 
-export const useAutoFocus = (queryInput, autoFocus) => { // TODO: might be able to use autofocus property of input for this - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus
-  useEffect(() => {
-    if (autoFocus) queryInput.current.focus()
-  }, [autoFocus, queryInput])
-}
-
 export const useQueryChange = (query, queryInput, typeaheadInput, onChange) => {
   useEffect(() => {
     const hasTypeahead = !!typeaheadInput.current

src/lib/components/hooks/containerEffects.test.js

@@ -2,7 +2,6 @@ import { vi, describe, test, expect } from 'vitest'
 import { renderHook } from '@testing-library/react-hooks'
 import undef from '../../utils/undef'
 import {
-  useAutoFocus,
   useQueryChange,
   useHighlight,
   useSelected,
@@ -19,22 +18,6 @@ let inputRef = (value = '') => ( //TODO: Put in a beforeEach when blogging
   }
 )
 
-describe('useAutoFocus', () => {
-  test('Focus is set when autofocus is true', () => {
-    const ref = inputRef()
-    const autoFocus = true
-    renderHook(() => useAutoFocus(ref, autoFocus))
-    expect(ref.current.focus).toHaveBeenCalledTimes(1)
-  })
-
-  test('Focus is not set when autofocus is false', () => {
-    const ref = inputRef()
-    const autoFocus = false
-    renderHook(() => useAutoFocus(ref, autoFocus))
-    expect(ref.current.focus).toHaveBeenCalledTimes(0)
-  })
-})
-
 describe('useQueryChange', () => {
   const typeaheadValue = 'Chicago, Illinois, United States'
   const queryValue = 'Chi'