fix(search): clearable (#1544)

entur · Jun 11, 2024 · aef0e13 · aef0e13
1 parent df5f0ca
commit aef0e13
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/next-tavla/app/(admin)/boards/components/Search/index.tsx b/next-tavla/app/(admin)/boards/components/Search/index.tsx
@@ -2,17 +2,28 @@
 import { TextField } from '@entur/form'
 import { SearchIcon } from '@entur/icons'
 import { useSearchParamReplacer } from '../../hooks/useSearchParamReplacer'
+import { useEffect, useState } from 'react'
 
 function Search() {
     const [value, replace] = useSearchParamReplacer('search')
+    const [search, setSearch] = useState(value)
+
+    useEffect(() => {
+        replace(search)
+    }, [replace, search])
     return (
         <TextField
             className="w-full md:w-1/2"
             label="Søk på navn på tavle"
             prepend={<SearchIcon inline aria-hidden="true" />}
-            defaultValue={value}
+            value={search}
             onChange={(e) => {
-                replace(e.target.value)
+                setSearch(e.target.value)
+            }}
+            id="search"
+            clearable
+            onClear={() => {
+                setSearch('')
             }}
         />
     )