From 91b398d039fad9608d93d464a8c0b927dbfe3378 Mon Sep 17 00:00:00 2001
From: Paul Chavard <pro@paul.chavard.net>
Date: Fri, 12 Jul 2024 16:30:43 +0200
Subject: [PATCH] fix(education): improve some settings to make champ education
 more reliable

---
 .../annuaire_education_component.rb               |  3 ++-
 app/javascript/components/ComboBox.tsx            |  2 ++
 app/javascript/components/react-aria/hooks.ts     | 15 ++++++++-------
 app/javascript/components/react-aria/props.ts     |  3 ++-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/components/editable_champ/annuaire_education_component.rb b/app/components/editable_champ/annuaire_education_component.rb
index fc38867bb..fc7fd6bd5 100644
--- a/app/components/editable_champ/annuaire_education_component.rb
+++ b/app/components/editable_champ/annuaire_education_component.rb
@@ -10,6 +10,7 @@ class EditableChamp::AnnuaireEducationComponent < EditableChamp::EditableChampBa
       selected_key: @champ.external_id,
       items: @champ.selected_items,
       loader: data_sources_data_source_education_path,
-      minimum_input_length: 3)
+      debounce: 500,
+      minimum_input_length: 5)
   end
 end
diff --git a/app/javascript/components/ComboBox.tsx b/app/javascript/components/ComboBox.tsx
index d93b957e8..b51c2623a 100644
--- a/app/javascript/components/ComboBox.tsx
+++ b/app/javascript/components/ComboBox.tsx
@@ -231,6 +231,7 @@ export function RemoteComboBox({
     allowsCustomValue,
     minimumInputLength,
     limit,
+    debounce,
     formValue,
     name,
     form,
@@ -252,6 +253,7 @@ export function RemoteComboBox({
     allowsCustomValue,
     defaultItems,
     defaultSelectedKey,
+    debounce,
     load,
     onChange: (item) => {
       onChange?.(item);
diff --git a/app/javascript/components/react-aria/hooks.ts b/app/javascript/components/react-aria/hooks.ts
index e00bff289..abd5a820b 100644
--- a/app/javascript/components/react-aria/hooks.ts
+++ b/app/javascript/components/react-aria/hooks.ts
@@ -427,14 +427,15 @@ export const createLoader: (
       });
       if (response.ok) {
         const json = await response.json();
-        const [err, result] = s.validate(json, s.array(Item), { coerce: true });
+        const [err, items] = s.validate(json, s.array(Item), { coerce: true });
         if (!err) {
-          const items = matchSorter(result, filterText, {
-            keys: ['label']
-          });
-          return {
-            items: limit ? items.slice(0, limit) : items
-          };
+          if (items.length > limit) {
+            const filteredItems = matchSorter(items, filterText, {
+              keys: ['label']
+            });
+            return { items: filteredItems.slice(0, limit) };
+          }
+          return { items };
         }
       }
       return { items: [] };
diff --git a/app/javascript/components/react-aria/props.ts b/app/javascript/components/react-aria/props.ts
index 4932551c5..9000565a1 100644
--- a/app/javascript/components/react-aria/props.ts
+++ b/app/javascript/components/react-aria/props.ts
@@ -67,7 +67,8 @@ export const RemoteComboBoxProps = s.assign(
       selectedKey: s.nullable(s.string()),
       minimumInputLength: s.number(),
       limit: s.number(),
-      allowsCustomValue: s.boolean()
+      allowsCustomValue: s.boolean(),
+      debounce: s.number()
     })
   )
 );