Merge pull request #193 from cosmology-tech/fix/combobox-noble

fix: combobox should not show empty list when collection is empty
hyperweb-io · Jun 26, 2024 · eaeeace · eaeeace
2 parents 12055e0 + 456a908
commit eaeeace
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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,