From 402d0dd3dbbc94a08ec26491c40096d153c53fc4 Mon Sep 17 00:00:00 2001
From: Paul Chavard <pro@paul.chavard.net>
Date: Wed, 30 Mar 2022 18:13:15 +0200
Subject: [PATCH 1/3] Revert "refactor(react): useDeferredValue"

This reverts commit cd4d7b5d36644b0fe6c29af6922aa4dd5adf41d4.
---
 app/javascript/components/ComboSearch.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/javascript/components/ComboSearch.tsx b/app/javascript/components/ComboSearch.tsx
index 72c5816b4..28a4ea696 100644
--- a/app/javascript/components/ComboSearch.tsx
+++ b/app/javascript/components/ComboSearch.tsx
@@ -1,9 +1,5 @@
-import React, {
-  useState,
-  useRef,
-  useDeferredValue,
-  ChangeEventHandler
-} from 'react';
+import React, { useState, useRef, ChangeEventHandler } from 'react';
+import { useDebounce } from 'use-debounce';
 import { useQuery } from 'react-query';
 import {
   Combobox,
@@ -63,7 +59,7 @@ function ComboSearch<Result>({
   const [, setExternalId] = useHiddenField(group, 'external_id');
   const initialValue = externalValue ? externalValue : controlledValue;
   const [searchTerm, setSearchTerm] = useState('');
-  const debouncedSearchTerm = useDeferredValue(searchTerm);
+  const [debouncedSearchTerm] = useDebounce(searchTerm, 300);
   const [value, setValue] = useState(initialValue);
   const resultsMap = useRef<
     Record<string, { key: string; value: string; result: Result }>

From 5ab880aae74bc8b560c9a8e408ac7f1a91b7adf9 Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Mon, 10 Oct 2022 17:37:26 +0200
Subject: [PATCH 2/3] chore(yarn): +use-debounce

---
 package.json | 1 +
 yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/package.json b/package.json
index 5174f0989..e27f0e6f6 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "tiny-invariant": "^1.2.0",
     "trix": "^1.2.3",
     "turbo-polyfills": "^0.3.0",
+    "use-debounce": "^8.0.4",
     "whatwg-fetch": "^3.0.0",
     "yet-another-abortcontroller-polyfill": "^0.0.4",
     "zod": "^3.17.10"
diff --git a/yarn.lock b/yarn.lock
index 2faa026cb..17f92bac1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4238,6 +4238,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-debounce@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-8.0.4.tgz#27e93b2f010bd0b8ad06e9fc7de891d9ee5d6b8e"
+  integrity sha512-fGqsYQzl8kLHF2QpQSgIwgOgJmnh6j5L6SIzQiHdLfwp3q1egUL3btq5Bg2SJysH6A0ILLgT2IqXZKoNJr0nFw==
+
 uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"

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 3/3] 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 }>