@@ -17,26 +17,50 @@ const SearchInput = () => {
1717 inputRef . current ?. focus ( ) ;
1818 } ;
1919
20+ const clearSearch = useCallback ( ( ) => {
21+ setSearchText ( "" ) ;
22+ searchParams . delete ( QueryParams . SEARCH ) ;
23+ setSearchParams ( searchParams ) ;
24+ } , [ searchParams , setSearchParams , setSearchText ] ) ;
25+ 26+ const performSearch = useCallback ( ( ) => {
27+ // Check if the input element is focused.
28+ if ( document . activeElement !== inputRef . current ) {
29+ return ;
30+ }
31+ 32+ const formattedVal = searchText . toLowerCase ( ) ;
33+ 34+ setSearchText ( formattedVal ) ;
35+ if ( ! formattedVal ) {
36+ searchParams . delete ( QueryParams . SEARCH ) ;
37+ setSearchParams ( searchParams ) ;
38+ } else {
39+ searchParams . set ( QueryParams . SEARCH , formattedVal ) ;
40+ setSearchParams ( searchParams ) ;
41+ }
42+ } , [ searchParams , searchText , setSearchParams , setSearchText ] ) ;
43+ 44+ /**
45+ * Focus the search input when the user presses the `/` key.
46+ */
2047 const handleSearchKeyPress = ( e : KeyboardEvent ) => {
2148 if ( e . key === "/" ) {
2249 e . preventDefault ( ) ;
2350 inputRef . current ?. focus ( ) ;
2451 }
2552 } ;
2653
27- const clearSearch = useCallback ( ( ) => {
28- setSearchText ( "" ) ;
29- searchParams . delete ( QueryParams . SEARCH ) ;
30- setSearchParams ( searchParams ) ;
31- } , [ searchParams , setSearchParams , setSearchText ] ) ;
32- 33- const handleEscapePress = useCallback (
54+ /**
55+ * Clear search text and blur the input when the `Escape` key is pressed.
56+ */
57+ const handleEscapeKeyPress = useCallback (
3458 ( e : KeyboardEvent ) => {
3559 if ( e . key !== "Escape" ) {
3660 return ;
3761 }
3862
39- // check if the input is focused
63+ // Check if the input element is focused.
4064 if ( document . activeElement !== inputRef . current ) {
4165 return ;
4266 }
@@ -48,45 +72,25 @@ const SearchInput = () => {
4872 [ clearSearch ]
4973 ) ;
5074
51- const handleReturnPress = useCallback (
52- ( e : KeyboardEvent ) => {
53- if ( e . key !== "Enter" ) {
54- return ;
55- }
56- 57- // check if the input is focused
58- if ( document . activeElement !== inputRef . current ) {
59- return ;
60- }
61- 62- const formattedVal = searchText . trim ( ) . toLowerCase ( ) || "" ;
63- 64- setSearchText ( formattedVal ) ;
65- if ( ! formattedVal ) {
66- searchParams . delete ( QueryParams . SEARCH ) ;
67- setSearchParams ( searchParams ) ;
68- } else {
69- searchParams . set ( QueryParams . SEARCH , formattedVal ) ;
70- setSearchParams ( searchParams ) ;
71- }
72- } ,
73- [ searchParams , searchText , setSearchParams , setSearchText ]
74- ) ;
75- 7675 useEffect ( ( ) => {
7776 document . addEventListener ( "keyup" , handleSearchKeyPress ) ;
78- document . addEventListener ( "keyup" , handleEscapePress ) ;
79- document . addEventListener ( "keyup" , handleReturnPress ) ;
77+ document . addEventListener ( "keyup" , handleEscapeKeyPress ) ;
8078
8179 return ( ) => {
8280 document . removeEventListener ( "keyup" , handleSearchKeyPress ) ;
83- document . removeEventListener ( "keyup" , handleEscapePress ) ;
84- document . removeEventListener ( "keyup" , handleReturnPress ) ;
81+ document . removeEventListener ( "keyup" , handleEscapeKeyPress ) ;
8582 } ;
86- } , [ handleEscapePress , handleReturnPress ] ) ;
83+ } , [ handleEscapeKeyPress ] ) ;
84+ 85+ /**
86+ * Update the search query in the URL when the search text changes.
87+ */
88+ useEffect ( ( ) => {
89+ performSearch ( ) ;
90+ } , [ searchText , performSearch ] ) ;
8791
8892 /**
89- * Set the search text to the search query from the URL
93+ * Set the search text to the search query from the URL on mount.
9094 */
9195 useEffect ( ( ) => {
9296 const searchQuery = searchParams . get ( QueryParams . SEARCH ) ;
0 commit comments