From 45c45be432454db129caea05c6a5db61e956fe5d Mon Sep 17 00:00:00 2001
From: devgioele <gioele.devitti@aboutbits.it>
Date: Thu, 21 Sep 2023 16:32:38 +0200
Subject: [PATCH 1/2] add support for default values to useFilter

---
 src/components/filter/useFilter.ts | 21 ++++++++++++++++-----
 src/examples/List.stories.tsx      |  6 +++++-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/filter/useFilter.ts b/src/components/filter/useFilter.ts
index d2c32734..dc61ddc3 100644
--- a/src/components/filter/useFilter.ts
+++ b/src/components/filter/useFilter.ts
@@ -1,5 +1,12 @@
 import { useDebounce } from '@aboutbits/react-toolbox'
-import { ChangeEventHandler, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  ChangeEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
 export type FilterOptions = {
   /** Whether to debounce and the debounce interval in milliseconds.
@@ -25,7 +32,11 @@ export function useFilter<TElement extends HTMLElement & { value: unknown }>() {
       }
       return 0
     }, [options?.debounce])
-    const elementRef = useRef<TElement>(null)
+    const [element, setElement] = useState<TElement | null>(null)
+
+    const elementRef = useCallback((element: TElement) => {
+      setElement(element)
+    }, [])
 
     const settingNewValueRef = useRef(false)
 
@@ -43,10 +54,10 @@ export function useFilter<TElement extends HTMLElement & { value: unknown }>() {
     }, [debouncedInternalValue, setValue])
 
     useEffect(() => {
-      if (elementRef.current && !settingNewValueRef.current) {
-        elementRef.current.value = value
+      if (element && !settingNewValueRef.current) {
+        element.value = value
       }
-    }, [value])
+    }, [value, element])
 
     const onChange: ChangeEventHandler<TElement> = (e) => {
       settingNewValueRef.current = true
diff --git a/src/examples/List.stories.tsx b/src/examples/List.stories.tsx
index 1a7597ff..aa75a33d 100644
--- a/src/examples/List.stories.tsx
+++ b/src/examples/List.stories.tsx
@@ -130,7 +130,11 @@ export const ListWithFilter: Story = () => {
   const numberOfTotalItems = 1000
   const numberOfItemsPerPage = 5
   const [page, setPage] = useState(1)
-  const [filter, setFilter] = useState({ role: '', department: '', search: '' })
+  const [filter, setFilter] = useState({
+    role: 'ADMIN',
+    department: '',
+    search: '',
+  })
   const content = useMockedList(numberOfTotalItems).filter(
     (item) =>
       item.name.includes(filter.search) &&

From b406685074ab124a5c9d4ec3457dce93abee3ede Mon Sep 17 00:00:00 2001
From: devgioele <gioele.devitti@aboutbits.it>
Date: Thu, 21 Sep 2023 16:52:20 +0200
Subject: [PATCH 2/2] add null as possible value of ref callback argument

---
 src/components/filter/useFilter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/filter/useFilter.ts b/src/components/filter/useFilter.ts
index dc61ddc3..2abca890 100644
--- a/src/components/filter/useFilter.ts
+++ b/src/components/filter/useFilter.ts
@@ -34,7 +34,7 @@ export function useFilter<TElement extends HTMLElement & { value: unknown }>() {
     }, [options?.debounce])
     const [element, setElement] = useState<TElement | null>(null)
 
-    const elementRef = useCallback((element: TElement) => {
+    const elementRef = useCallback((element: TElement | null) => {
       setElement(element)
     }, [])