fix: reset search on clear filter

src/Common/SearchBar/SearchBar.component.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent } from 'react'
+import { ChangeEvent, useCallback, useRef, useState, KeyboardEvent, useEffect } from 'react'
 import { ReactComponent as Search } from '../../Assets/Icon/ic-search.svg'
 import { ReactComponent as Clear } from '../../Assets/Icon/ic-error-cross.svg'
 import { SearchBarProps } from './types'
@@ -55,21 +55,38 @@ const SearchBar = ({
         debounceTimeout,
     ])
 
+    // In most case would reset the state by doing history.push('/')
+    useEffect(() => {
+        inputRef.current.value = initialSearchText
+    }, [initialSearchText])
+
+    const _applySearch = (value: string) => {
+        handleSearchChange(value)
+        handleEnter(value)
+    }
+
+    const clearSearch = () => {
+        inputRef.current.value = ''
+        _applySearch('')
+        setShowClearButton(false)
+    }
+
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target
         setShowClearButton(!!value)
+
+        if (!value) {
+            clearSearch()
+            return
+        }
+
         if (shouldDebounce) {
             debouncedSearchChange(value)
         } else {
             handleSearchChange(value)
         }
     }
 
-    const _applySearch = (value: string) => {
-        handleSearchChange(value)
-        handleEnter(value)
-    }
-
     const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
         const { key } = e
 
@@ -80,12 +97,6 @@ const SearchBar = ({
         }
     }
 
-    const clearSearch = () => {
-        inputRef.current.value = ''
-        _applySearch('')
-        setShowClearButton(false)
-    }
-
     return (
         <div className={containerClassName}>
             <div className="search-bar bc-n50 focus-within-border-b5 dc__hover-border-n300 dc__block w-100 min-w-200 dc__position-rel en-2 bw-1 br-4 h-32">
@@ -103,6 +114,7 @@ const SearchBar = ({
                     onKeyDown={handleKeyDown}
                     ref={inputRef}
                 />
+                {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton && (
                     <button
                         className="flex search-bar__clear-button dc__position-abs dc__transparent mt-0 mb-0 mr-5 ml-5"