🐛 fix: no result not showing

packages/frontend/src/components/shared/Select/Select.tsx

@@ -17,7 +17,7 @@ import {
 } from 'components/shared/CustomIcon';
 import { cloneIcon } from 'utils/cloneIcon';
 import { cn } from 'utils/classnames';
-import { SelectItem } from './SelectItem';
+import { SelectItem, EmptySelectItem } from './SelectItem';
 import { SelectValue } from './SelectValue';
 
 export type SelectOption = {
@@ -300,7 +300,7 @@ export const Select = ({
     }
     return placeholderProp;
   }, [hideValues, multiple, selectedItems.length, placeholderProp]);
-
+  console.log('filteredItems', filteredItems.length === 0);
   return (
     <div className={theme.container()}>
       {/* Label & description */}
@@ -372,8 +372,7 @@ export const Select = ({
           'bottom-[65%]': dropdownPosition === 'top' && label && description,
         })}
       >
-        {isOpen &&
+        {isOpen && filteredItems.length !== 0 ? (
-          filteredItems.length !== 0 &&
           filteredItems.map((item, index) => (
             <SelectItem
               {...getItemProps({ item, index })}
@@ -382,10 +381,12 @@ export const Select = ({
               option={item}
               hovered={highlightedIndex === index}
               orientation={orientation}
-              empty={filteredItems.length === 0}
               variant={variant}
             />
-          ))}
+          ))
+        ) : (
+          <EmptySelectItem />
+        )}
       </ul>
     </div>
   );

packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx

@@ -26,21 +26,11 @@ export interface SelectItemProps
   option: SelectOption;
   orientation?: SelectOrientation;
   hovered?: boolean;
-  empty?: boolean;
 }
 
 const SelectItem = forwardRef<HTMLLIElement, SelectItemProps>(
   (
-    {
+    { className, selected, orientation, hovered, variant, option, ...props },
-      className,
-      selected,
-      option,
-      orientation,
-      hovered,
-      empty,
-      variant,
-      ...props
-    },
     ref,
   ) => {
     const theme = selectItemTheme({ active: hovered, orientation, variant });
@@ -60,14 +50,6 @@ const SelectItem = forwardRef<HTMLLIElement, SelectItemProps>(
       return null;
     }, [rightIcon]);
 
-    if (empty) {
-      return (
-        <li {...props} className={theme.wrapper()}>
-          No results found
-        </li>
-      );
-    }
-
     return (
       <li
         {...props}
@@ -95,4 +77,19 @@ const SelectItem = forwardRef<HTMLLIElement, SelectItemProps>(
 
 SelectItem.displayName = 'SelectItem';
 
+/**
+ * Represents an empty select item.
+ * @returns {JSX.Element} - A JSX element representing the empty select item.
+ */
+export const EmptySelectItem = () => {
+  const theme = selectItemTheme();
+  return (
+    <li className={theme.wrapper()}>
+      <p className={theme.label({ class: 'text-elements-disabled' })}>
+        No results found
+      </p>
+    </li>
+  );
+};
+
 export { SelectItem };