Dont want for location change to finish before closing search on item select
Luke Karrys committed
Oct 23, 2023 at 18:31 UTC
1196548a031b21d916d089830a5e6ef159d563ef
2 files changed
+29
-27
src/components/search.js
+13
-25
@@ -8,11 +8,10 @@ import SearchResults from './search-results'
8
import useSiteMetadata from '../hooks/use-site-metadata'
9
import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
10
import {LightTheme} from '../theme'
11
-import useLocationChange from '../hooks/use-location-change'
11
12
export const Desktop = props => {
13
const siteMetadata = useSiteMetadata()
15
- const {getInputProps, getMenuProps, isOpen, results, getItemProps, highlightedIndex} = props
14
+ const {getInputProps, getMenuProps, resultsOpen, results, getItemProps, highlightedIndex} = props
15
16
return (
17
<Box sx={{position: 'relative'}}>
@@ -23,7 +22,7 @@ export const Desktop = props => {
22
{...getInputProps()}
23
/>
24
<Box sx={{position: 'absolute', left: 0, right: 0, pt: 1}} {...getMenuProps()}>
26
- {isOpen ? (
25
+ {resultsOpen ? (
26
<LightTheme
27
sx={{
28
overflow: 'auto',
@@ -46,46 +45,35 @@ export const Desktop = props => {
45
}
46
47
export const Mobile = ({
49
- reset,
48
results,
51
- isOpen: resultsOpen,
49
+ resultsOpen,
50
getInputProps,
51
getItemProps,
52
getMenuProps,
53
highlightedIndex,
54
+ isMobileSearchOpen,
55
+ setMobileSearchOpen,
56
+ resetAndClose,
57
}) => {
57
- const [open, setOpen] = React.useState(false)
58
const siteMetadata = useSiteMetadata()
59
- const locationChange = useLocationChange()
60
-
61
- React.useEffect(() => {
62
- if (locationChange.change) {
63
- setOpen(false)
64
- }
65
- }, [locationChange])
59
60
// Fixes focus behavior on iOS where the input gets focus styles but not the
61
// actual focus after animating open.
62
const ref = React.useRef()
63
React.useEffect(() => {
71
- if (open) {
64
+ if (isMobileSearchOpen) {
65
ref.current.focus()
66
}
74
- }, [ref, open])
75
-
76
- const handleDismiss = () => {
77
- reset()
78
- setOpen(false)
79
- }
67
+ }, [ref, isMobileSearchOpen])
68
69
return (
70
<>
83
- <Button aria-label="Search" aria-expanded={open} onClick={() => setOpen(true)}>
71
+ <Button aria-label="Search" aria-expanded={isMobileSearchOpen} onClick={() => setMobileSearchOpen(true)}>
72
<SearchIcon />
73
</Button>
74
<AnimatePresence>
87
- {open ? (
88
- <FocusOn returnFocus={true} onEscapeKey={handleDismiss}>
75
+ {isMobileSearchOpen ? (
76
+ <FocusOn returnFocus={true} onEscapeKey={resetAndClose}>
77
<Box
78
sx={{
79
position: 'fixed',
@@ -112,7 +100,7 @@ export const Mobile = ({
100
animate={{opacity: 1}}
101
exit={{opacity: 0}}
102
transition={{type: 'tween'}}
115
- onClick={handleDismiss}
103
+ onClick={resetAndClose}
104
/>
105
<Box sx={{display: 'flex', flexDirection: 'column', height: resultsOpen ? '100%' : 'auto'}}>
106
<Box
@@ -183,7 +171,7 @@ export const Mobile = ({
171
exit={{opacity: 0}}
172
transition={{type: 'tween', ease: 'easeOut', duration: 0.2}}
173
>
186
- <Button sx={{ml: 3}} aria-label="Cancel" onClick={handleDismiss}>
174
+ <Button sx={{ml: 3}} aria-label="Cancel" onClick={resetAndClose}>
175
<XIcon />
176
</Button>
177
</Box>
src/hooks/use-search.js
+16
-2
@@ -55,6 +55,8 @@ const useCliVersion = () => {
55
56
const useSearchCombobox = (results, setQuery) => {
57
const isMobile = useIsMobile()
58
+ const [isMobileSearchOpen, setMobileSearchOpen] = React.useState(false)
59
+
60
const combobox = useCombobox({
61
id: 'search-box',
62
items: results || [],
@@ -62,6 +64,7 @@ const useSearchCombobox = (results, setQuery) => {
64
onSelectedItemChange: ({selectedItem}) => {
65
if (selectedItem) {
66
navigate(selectedItem.path)
67
+ setMobileSearchOpen(false)
68
combobox.reset()
69
}
70
},
@@ -90,7 +93,18 @@ const useSearchCombobox = (results, setQuery) => {
93
return changes
94
},
95
})
93
- return combobox
96
+
97
+ const resetAndClose = React.useCallback(() => {
98
+ combobox.reset()
99
+ setMobileSearchOpen(false)
100
+ }, [combobox, setMobileSearchOpen])
101
+
102
+ return {
103
+ ...combobox,
104
+ isMobileSearchOpen,
105
+ setMobileSearchOpen,
106
+ resetAndClose,
107
+ }
108
}
109
110
function useSearch() {
@@ -138,7 +152,7 @@ function useSearch() {
152
return {
153
...combobox,
154
results,
141
- isOpen: !!(combobox.isOpen && results),
155
+ resultsOpen: !!(combobox.isOpen && results),
156
}
157
}
158