Fix search focus on iOS
Luke Karrys committed
Oct 22, 2023 at 08:19 UTC
e1007d1248007fc48654eca3671742e13097020e
1 file changed
+10
-1
src/components/search.js
+10
-1
@@ -51,6 +51,15 @@ export const Mobile = props => {
51
const siteMetadata = useSiteMetadata()
52
const {reset, results, isOpen: resultsOpen, getInputProps, getItemProps, getMenuProps, highlightedIndex} = props
53
54
+ // Fixes focus behavior on iOS where the input gets focus styles but not the
55
+ // actual focus after animating open.
56
+ const ref = React.useRef()
57
+ React.useEffect(() => {
58
+ if (open) {
59
+ ref.current.focus()
60
+ }
61
+ }, [ref, open])
62
+
63
const handleDismiss = () => {
64
reset()
65
setOpen(false)
@@ -133,7 +142,7 @@ export const Mobile = props => {
142
placeholder={`Search ${siteMetadata.title}`}
143
aria-label={`Search ${siteMetadata.title}`}
144
sx={{width: '100%'}}
136
- {...getInputProps()}
145
+ {...getInputProps({ref})}
146
/>
147
</motion.div>
148
<Box