From 28f7dec8cad3a53921ad56b952586acee3b5b201 Mon Sep 17 00:00:00 2001
From: Isabella Fagioli <Isabella.fagioli@vtex.com>
Date: Mon, 9 Dec 2024 18:32:35 -0300
Subject: [PATCH] fix on clear

---
 react/components/CostCentersAutocomplete.tsx | 23 +++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/react/components/CostCentersAutocomplete.tsx b/react/components/CostCentersAutocomplete.tsx
index 13e6059..3fb5140 100644
--- a/react/components/CostCentersAutocomplete.tsx
+++ b/react/components/CostCentersAutocomplete.tsx
@@ -44,10 +44,9 @@ const CostCenterAutocomplete = ({ onChange, organizationId }: Props) => {
       })
     ) || []
 
-  const handleSearchInputChange = (serachInput: string) => {
-    setCostCenterTextInput(serachInput)
-
-}
+    const handleSearchInputChange = (searchInput: string | null) => {
+      setCostCenterTextInput(searchInput ?? '') 
+    }
 
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -67,12 +66,25 @@ const CostCenterAutocomplete = ({ onChange, organizationId }: Props) => {
         search: debouncedSearchTerm,
       })
     } else if (debouncedSearchTerm === '') {
+      refetch({
+        ...initialState,
+        id: organizationId,
+        search: '',
+      })
       onChange({ value: null, label: '' })
     }
   }, [debouncedSearchTerm])
 
   const handleChange = (selectedOption: { value: string | null; label: string } | null) => {
-    onChange(selectedOption ?? { value: null, label: '' }) 
+    if (!selectedOption || !selectedOption.value) {
+      setCostCenterTextInput('')
+      refetch({
+        ...initialState,
+        id: organizationId,
+        search: '',
+      })
+    }
+    onChange(selectedOption ?? { value: null, label: '' })
   }
 
   return (
@@ -84,6 +96,7 @@ const CostCenterAutocomplete = ({ onChange, organizationId }: Props) => {
       placeholder={formatMessage(messages.costCenter)}
       multi={false}
       valuesMaxHeight={200}
+      claerable={true}
     />
   )
 }