From d387229e804f835e9b1e0afe4e842b108cbe362a Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Sat, 24 Feb 2024 14:02:23 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20no=20result=20not=20showi?=
 =?UTF-8?q?ng?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/Select/Select.tsx   | 13 +++----
 .../shared/Select/SelectItem/SelectItem.tsx   | 35 +++++++++----------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/frontend/src/components/shared/Select/Select.tsx b/packages/frontend/src/components/shared/Select/Select.tsx
index 02e1eab3..d3bfa5a5 100644
--- a/packages/frontend/src/components/shared/Select/Select.tsx
+++ b/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 &&
-          filteredItems.length !== 0 &&
+        {isOpen && 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>
   );
diff --git a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx b/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx
index dc671371..3b2b683d 100644
--- a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx
+++ b/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,
-      option,
-      orientation,
-      hovered,
-      empty,
-      variant,
-      ...props
-    },
+    { className, selected, orientation, hovered, variant, option, ...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 };