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( } }, []); + const inputBorderBottomRadius = state.isOpen + ? state.collection.size === 0 + ? "8px" + : "$none" + : "8px"; + return ( ( 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,