From b3b594efcd8c897a19944cb6caf232865ba8d7f5 Mon Sep 17 00:00:00 2001
From: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com>
Date: Tue, 10 Sep 2024 12:54:48 +0530
Subject: [PATCH] Fixes multi-select search not working ( #6800 ) (#6964)

fixes #6800
---
 .../input/components/MultiSelectFieldInput.tsx         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
index f4c5745a4b60..e95eeb5e21bd 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
+++ b/packages/twenty-front/src/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,7 +89,7 @@ export const MultiSelectFieldInput = ({
     },
   });
 
-  const optionIds = optionsInDropDown.map((option) => option.value);
+  const optionIds = filteredOptionsInDropDown.map((option) => option.value);
 
   return (
     <SelectableList
@@ -95,7 +97,7 @@ export const MultiSelectFieldInput = ({
       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}