From 266dfe405305290df9564c3493fc5c8d3c6cf2d6 Mon Sep 17 00:00:00 2001
From: AJAL ODORA JONATHAN <43242517+ODORA0@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:42:49 +0300
Subject: [PATCH] (feat) O3-3911 Display all items on ui-select-extended (#440)

* (feat) Display all items on ui-select-extended

* update branch

* remove filtering prop to use carbon's default filtering
---
 .../ui-select-extended.component.tsx          |  7 -------
 .../ui-select-extended.test.tsx               | 19 ++++++++++++++-----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx b/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx
index a7b721f2..2673e060 100644
--- a/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx
+++ b/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx
@@ -169,13 +169,6 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
             itemToString={(item) => item?.display}
             selectedItem={selectedItem}
             placeholder={isSearchable ? t('search', 'Search') + '...' : null}
-            shouldFilterItem={({ item, inputValue }) => {
-              if (!inputValue) {
-                // Carbon's initial call at component mount
-                return true;
-              }
-              return item.display?.toLowerCase().includes(inputValue.toLowerCase());
-            }}
             onChange={({ selectedItem }) => {
               isProcessingSelection.current = true;
               setFieldValue(selectedItem?.uuid);
diff --git a/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx b/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx
index aaabeffd..026fa911 100644
--- a/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx
+++ b/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx
@@ -252,18 +252,27 @@ describe('UiSelectExtended', () => {
       );
     });
 
-    it('should filter items based on user input', async () => {
+    it('should display all items regardless of user input', async () => {
       await act(async () => {
         renderForm();
       });
 
-      const transferLocationSelect = await findSelectInput(screen, 'Transfer Location');
+      const transferLocationSelect = await findSelectInput(screen, 'Transfer Location');    
+      // Open the dropdown
       await user.click(transferLocationSelect);
+    
+      // Verify all items are displayed initially
+      expect(screen.getByText('Kololo')).toBeInTheDocument();
+      expect(screen.getByText('Naguru')).toBeInTheDocument();
+      expect(screen.getByText('Muyenga')).toBeInTheDocument();
+    
+      // Type input
       await user.type(transferLocationSelect, 'Nag');
-
+    
+      // Verify all items are still displayed
+      expect(screen.getByText('Kololo')).toBeInTheDocument();
       expect(screen.getByText('Naguru')).toBeInTheDocument();
-      expect(screen.queryByText('Kololo')).not.toBeInTheDocument();
-      expect(screen.queryByText('Muyenga')).not.toBeInTheDocument();
+      expect(screen.getByText('Muyenga')).toBeInTheDocument();
     });
   });