Fixes multi-select search not working ( #6800 ) (#6964)

fixes #6800
twentyhq · Sep 10, 2024 · b3b594e · b3b594e
1 parent 9399168
commit b3b594e
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/.../modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx b/.../modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
@@ -46,7 +46,9 @@ export const MultiSelectFieldInput = ({
     fieldValues?.includes(option.value),
   );
 
-  const optionsInDropDown = fieldDefinition.metadata.options;
+  const filteredOptionsInDropDown = fieldDefinition.metadata.options.filter(
+    (option) => option.label.toLowerCase().includes(searchFilter.toLowerCase()),
+  );
 
   const formatNewSelectedOptions = (value: string) => {
     const selectedOptionsValues = selectedOptions.map(
@@ -87,15 +89,15 @@ export const MultiSelectFieldInput = ({
     },
   });
 
-  const optionIds = optionsInDropDown.map((option) => option.value);
+  const optionIds = filteredOptionsInDropDown.map((option) => option.value);
 
   return (
     <SelectableList
       selectableListId={MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID}
       selectableItemIdArray={optionIds}
       hotkeyScope={hotkeyScope}
       onEnter={(itemId) => {
-        const option = optionsInDropDown.find(
+        const option = filteredOptionsInDropDown.find(
           (option) => option.value === itemId,
         );
         if (isDefined(option)) {
@@ -112,7 +114,7 @@ export const MultiSelectFieldInput = ({
           />
           <DropdownMenuSeparator />
           <DropdownMenuItemsContainer hasMaxHeight>
-            {optionsInDropDown.map((option) => {
+            {filteredOptionsInDropDown.map((option) => {
               return (
                 <MenuItemMultiSelectTag
                   key={option.value}