From a19cfe94df6157e0a366c6f66a990b68f45a1049 Mon Sep 17 00:00:00 2001
From: Birk Johansson <birk@dhis2.org>
Date: Tue, 19 Mar 2024 11:58:52 +0100
Subject: [PATCH] fix(list): fix filter being cleared on refresh

---
 .../filterSelectors/IdentifiableFilter.tsx    | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx b/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
index 75cf841a..606dea31 100644
--- a/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
+++ b/src/components/sectionList/filters/filterSelectors/IdentifiableFilter.tsx
@@ -1,23 +1,30 @@
 import i18n from '@dhis2/d2-i18n'
 import { Input, InputEventPayload } from '@dhis2/ui'
 import React, { useEffect, useState } from 'react'
-import {
-    useDebounce,
-    IDENTIFIABLE_FILTER_KEY,
-    useSectionListFilter,
-} from '../../../../lib'
+import { useDebouncedCallback } from 'use-debounce'
+import { IDENTIFIABLE_FILTER_KEY, useSectionListFilter } from '../../../../lib'
 import css from './Filters.module.css'
 
 export const IdentifiableFilter = () => {
     const [filter, setFilter] = useSectionListFilter(IDENTIFIABLE_FILTER_KEY)
     const [value, setValue] = useState(filter || '')
-    const debouncedValue = useDebounce<typeof filter>(value, 200)
 
-    useEffect(() => {
-        setFilter(debouncedValue || undefined) // convert empty string to undefined
-    }, [debouncedValue, setFilter])
+    const debouncedSetFilter = useDebouncedCallback(
+        (debouncedFilter: string) =>
+            // convert empty string to undefined
+            // to prevent empty-value like "identifiable=" in URL
+            setFilter(debouncedFilter),
+        200
+    )
+
+    const handleSetValue = (event: InputEventPayload) => {
+        const eventValue = event.value ?? ''
+        setValue(eventValue)
+        debouncedSetFilter(eventValue)
+    }
 
     useEffect(() => {
+        // clear input-value when "Clear all filters"
         if (!filter) {
             setValue('')
         }
@@ -28,9 +35,7 @@ export const IdentifiableFilter = () => {
             <Input
                 className={css.identifiableSelectionFilter}
                 placeholder={i18n.t('Search by name, code or ID')}
-                onChange={(value: InputEventPayload) =>
-                    setValue(value.value ?? '')
-                }
+                onChange={handleSetValue}
                 value={value}
                 dataTest="input-search-name"
                 dense