fix(search): sync search states on navigation

src/components/SearchInput.tsx

@@ -3,10 +3,11 @@ import { forwardRef } from 'react'
 interface SearchInputProps {
   handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
   handleSearch: () => void
+  handleChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ handleKeyDown, handleSearch }, ref) => (
+  ({ handleKeyDown, handleSearch, handleChange }, ref) => (
     <div className='SearchMain'>
       <div className='SearchMainInside'>
         <div className='SearchMainInsideWrapper'>
@@ -15,6 +16,7 @@ export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
             className='SMIWInput'
             ref={ref}
             onKeyDown={handleKeyDown}
+            onChange={handleChange}
             placeholder='Enter search term'
           />
           <button

src/pages/blogs/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useLoaderData, useNavigation, useSearchParams } from 'react-router-dom'
 import { useLocalStorage } from 'hooks'
 import { BlogCardDetails, NSFWFilter, SortBy } from 'types'
@@ -28,9 +28,15 @@ export const BlogsPage = () => {
   // Search
   const searchTermRef = useRef<HTMLInputElement>(null)
   const [searchParams, setSearchParams] = useSearchParams()
-  const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '')
+  useEffect(() => {
+    // Keep the states synced with the URL
+    const q = searchParams.get('q')
+    if (searchTermRef.current) searchTermRef.current.value = q ?? ''
+    setSearchTerm(q ?? '')
+  }, [searchParams])
+  const [searchTerm, setSearchTerm] = useState('')
   const handleSearch = () => {
-    const value = searchTermRef.current?.value || '' // Access the input value from the ref
+    const value = searchTermRef.current?.value ?? '' // Access the input value from the ref
     setSearchTerm(value)
 
     if (value) {
@@ -43,6 +49,17 @@ export const BlogsPage = () => {
       replace: true
     })
   }
+  // Reset search automatically when deleting last entry
+  const handleChange = () => {
+    const value = searchTermRef.current?.value ?? '' // Access the input value from the ref
+    if (!value && searchParams.get('q')) {
+      searchParams.delete('q')
+      setSearchParams(searchParams, {
+        replace: true
+      })
+      handleSearch()
+    }
+  }
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       handleSearch()
@@ -126,6 +143,7 @@ export const BlogsPage = () => {
                 ref={searchTermRef}
                 handleKeyDown={handleKeyDown}
                 handleSearch={handleSearch}
+                handleChange={handleChange}
               />
             </div>
           </div>