From 456a9081573849373ffa868dd77922387a196eba Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Wed, 26 Jun 2024 15:52:57 +0700
Subject: [PATCH] fix: combobox should not show empty list when collection is
 empty

---
 .../react/scaffolds/noble-chain-combobox/list-box.tsx  |  1 +
 .../noble-chain-combobox/noble-chain-combobox.tsx      | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react/scaffolds/noble-chain-combobox/list-box.tsx b/packages/react/scaffolds/noble-chain-combobox/list-box.tsx
index b36f8dc9..8775760f 100644
--- a/packages/react/scaffolds/noble-chain-combobox/list-box.tsx
+++ b/packages/react/scaffolds/noble-chain-combobox/list-box.tsx
@@ -49,6 +49,7 @@ export function ListBox(props: ListBoxProps) {
       borderColor="$inputBorder"
       paddingX="$0"
       paddingY="$6"
+      opacity={state.collection.size === 0 ? "0" : "1"}
       {...props.styleProps}
       className={clx(listboxStyle[theme], props.styleProps.className)}
     >
diff --git a/packages/react/scaffolds/noble-chain-combobox/noble-chain-combobox.tsx b/packages/react/scaffolds/noble-chain-combobox/noble-chain-combobox.tsx
index 6aa6cf52..a5fb29e2 100644
--- a/packages/react/scaffolds/noble-chain-combobox/noble-chain-combobox.tsx
+++ b/packages/react/scaffolds/noble-chain-combobox/noble-chain-combobox.tsx
@@ -120,6 +120,12 @@ export default function NobleChainCombobox<T extends object>(
     }
   }, []);
 
+  const inputBorderBottomRadius = state.isOpen
+    ? state.collection.size === 0
+      ? "8px"
+      : "$none"
+    : "8px";
+
   return (
     <Box
       {...styleProps}
@@ -145,8 +151,8 @@ export default function NobleChainCombobox<T extends object>(
           borderStyle="solid"
           borderColor="$inputBorder"
           borderRadius="8px"
-          borderBottomLeftRadius={state.isOpen ? "$none" : "8px"}
-          borderBottomRightRadius={state.isOpen ? "$none" : "8px"}
+          borderBottomLeftRadius={inputBorderBottomRadius}
+          borderBottomRightRadius={inputBorderBottomRadius}
           boxRef={containerRef}
           attributes={{
             "data-focused": isFocused,