From 2d7eca9dd29c744a68e9d4eae8f7a889e422edbe Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Mon, 10 Oct 2022 21:09:23 +0200
Subject: [PATCH] feat(combo): debounce only with address / autocomplete binded
 on API

---
 app/javascript/components/ComboAdresseSearch.tsx | 1 +
 app/javascript/components/ComboSearch.tsx        | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/javascript/components/ComboAdresseSearch.tsx b/app/javascript/components/ComboAdresseSearch.tsx
index b9c91afc3..f6a34a322 100644
--- a/app/javascript/components/ComboAdresseSearch.tsx
+++ b/app/javascript/components/ComboAdresseSearch.tsx
@@ -25,6 +25,7 @@ export default function ComboAdresseSearch({
         minimumInputLength={2}
         transformResult={({ properties: { label } }) => [label, label, label]}
         transformResults={(_, result) => (result as RawResult).features}
+        debounceDelay={300}
       />
     </QueryClientProvider>
   );
diff --git a/app/javascript/components/ComboSearch.tsx b/app/javascript/components/ComboSearch.tsx
index 28a4ea696..fe4687da1 100644
--- a/app/javascript/components/ComboSearch.tsx
+++ b/app/javascript/components/ComboSearch.tsx
@@ -31,6 +31,7 @@ export type ComboSearchProps<Result> = {
   describedby?: string;
   className?: string;
   placeholder?: string;
+  debounceDelay?: number;
 };
 
 type QueryKey = readonly [
@@ -50,6 +51,7 @@ function ComboSearch<Result>({
   transformResults = (_, results) => results as Result[],
   id,
   describedby,
+  debounceDelay = 0,
   ...props
 }: ComboSearchProps<Result>) {
   invariant(id || onChange, 'ComboSearch: `id` or `onChange` are required');
@@ -59,7 +61,7 @@ function ComboSearch<Result>({
   const [, setExternalId] = useHiddenField(group, 'external_id');
   const initialValue = externalValue ? externalValue : controlledValue;
   const [searchTerm, setSearchTerm] = useState('');
-  const [debouncedSearchTerm] = useDebounce(searchTerm, 300);
+  const [debouncedSearchTerm] = useDebounce(searchTerm, debounceDelay);
   const [value, setValue] = useState(initialValue);
   const resultsMap = useRef<
     Record<string, { key: string; value: string; result: Result }>