[#67540] BlockNote: work package search does not list the correct wp when searching with ID

https://community.openproject.org/work_packages/67540

Please see https://react.dev/reference/react/useEffect#fetching-data-with-effects
and https://maxrozen.com/race-conditions-fetching-data-react-with-useeffect
to understand how this is preventing race conditions.

Author: judithroth

lib/hooks/useWorkPackageSearch.ts

@@ -17,6 +17,8 @@ export function useWorkPackageSearch(
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    let active = true;
+
     if (!searchQuery) {
       setSearchResults([]);
       setLoading(false);
@@ -29,18 +31,27 @@ export function useWorkPackageSearch(
     const debouncedSearchQuery = setTimeout(() => {
       searchWorkPackages(searchQuery)
         .then((results) => {
-          setSearchResults(results);
+          if (active) {
+            setSearchResults(results);
+          }
         })
         .catch((err) => {
-          setError(err.message || "Unknown error");
-          setSearchResults([]);
+          if (active) {
+            setError(err.message || "Unknown error");
+            setSearchResults([]);
+          }
         })
         .finally(() => {
-          setLoading(false);
+          if (active) {
+            setLoading(false);
+          }
         });
     }, debounce);
 
-    return () => clearTimeout(debouncedSearchQuery);
+    return () => {
+      active = false;
+      clearTimeout(debouncedSearchQuery);
+    };
   }, [searchQuery, debounce]);
 
   return {