From 2b83c73c9bddba415a74693cb295cd0bd02d26f2 Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Tue, 18 Mar 2025 16:59:55 -0600
Subject: [PATCH] fix: Icon not ordering after searching for Dropdown (#7144)

* feat: Enhance Dropdown Component with Filtered Metadata Support

- Added state management for filtered metadata in the Dropdown component.
- Updated filtering logic to synchronize filtered options with their corresponding metadata.
- Adjusted rendering to utilize filtered metadata for displaying icons and statuses, improving the component's responsiveness to user input.

* fix: Update Dropdown Component to Render Search Input Based on Options Availability

- Modified the Dropdown component to render the search input if either options or filtered options are present, enhancing user experience by ensuring search functionality is available when applicable.

* fix: Simplify Dropdown Component Search Input Logic

- Updated the Dropdown component to render the search input only when options are available, streamlining the conditional rendering logic and improving code clarity.
---
 .../core/dropdownComponent/index.tsx          | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/core/dropdownComponent/index.tsx b/src/frontend/src/components/core/dropdownComponent/index.tsx
index 0ad0623ef..eed5ba29a 100644
--- a/src/frontend/src/components/core/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/core/dropdownComponent/index.tsx
@@ -58,6 +58,7 @@ export default function Dropdown({
   const [openDialog, setOpenDialog] = useState(false);
   const [customValue, setCustomValue] = useState("");
   const [filteredOptions, setFilteredOptions] = useState(validOptions);
+  const [filteredMetadata, setFilteredMetadata] = useState(optionsMetaData);
   const [refreshOptions, setRefreshOptions] = useState(false);
   const refButton = useRef<HTMLButtonElement>(null);
 
@@ -94,8 +95,21 @@ export default function Dropdown({
     const value = event.target.value;
     const searchValues = fuse.search(value);
     const filtered = searchValues.map((search) => search.item);
-    if (!filtered.includes(value) && combobox && value) filtered.push(value);
+
+    // Update filteredOptions with the search results
     setFilteredOptions(value ? filtered : validOptions);
+
+    // Update filteredMetadata to match the filtered options
+    if (value && optionsMetaData) {
+      const newMetadata = filtered.map((option) => {
+        const originalIndex = validOptions.indexOf(option);
+        return optionsMetaData[originalIndex];
+      });
+      setFilteredMetadata(newMetadata);
+    } else {
+      setFilteredMetadata(optionsMetaData);
+    }
+
     setCustomValue(value);
   };
 
@@ -313,37 +327,37 @@ export default function Dropdown({
                   data-testid={`${option}-${index}-option`}
                 >
                   <div className="flex w-full items-center gap-2">
-                    {optionsMetaData?.[index]?.icon && (
+                    {filteredMetadata?.[index]?.icon && (
                       <ForwardedIconComponent
-                        name={optionsMetaData?.[index]?.icon || "Unknown"}
+                        name={filteredMetadata?.[index]?.icon || "Unknown"}
                         className="h-4 w-4 shrink-0 text-primary"
                       />
                     )}
                     <div
                       className={cn("flex truncate", {
                         "flex-col":
-                          optionsMetaData && optionsMetaData?.length > 0,
-                        "w-full pl-2": !optionsMetaData?.[index]?.icon,
+                          filteredMetadata && filteredMetadata?.length > 0,
+                        "w-full pl-2": !filteredMetadata?.[index]?.icon,
                       })}
                     >
                       <div className="flex truncate">
                         {option}{" "}
                         <span
                           className={`flex items-center pl-2 text-xs ${getStatusColor(
-                            optionsMetaData?.[index]?.status,
+                            filteredMetadata?.[index]?.status,
                           )}`}
                         >
                           <LoadingTextComponent
-                            text={optionsMetaData?.[
+                            text={filteredMetadata?.[
                               index
                             ]?.status?.toLowerCase()}
                           />
                         </span>
                       </div>
-                      {optionsMetaData && optionsMetaData?.length > 0 ? (
+                      {filteredMetadata && filteredMetadata?.length > 0 ? (
                         <div className="flex w-full items-center text-muted-foreground">
                           {Object.entries(
-                            filterMetadataKeys(optionsMetaData?.[index] || {}),
+                            filterMetadataKeys(filteredMetadata?.[index] || {}),
                           )
                             .filter(
                               ([key, value]) =>
@@ -408,7 +422,7 @@ export default function Dropdown({
       }
     >
       <Command>
-        {filteredOptions?.length > 0 && renderSearchInput()}
+        {options?.length > 0 && renderSearchInput()}
         {renderOptionsList()}
       </Command>
     </PopoverContentDropdown>