Merge pull request #7885 from colinux/fix-address-debounce

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>
   );

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,
@@ -35,6 +31,7 @@ export type ComboSearchProps<Result> = {
   describedby?: string;
   className?: string;
   placeholder?: string;
+  debounceDelay?: number;
 };
 
 type QueryKey = readonly [
@@ -54,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');
@@ -63,7 +61,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, debounceDelay);
   const [value, setValue] = useState(initialValue);
   const resultsMap = useRef<
     Record<string, { key: string; value: string; result: Result }>

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"

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"