fix: use an empty popover ref to avoid runtime error

hyperweb-io · Apr 30, 2024 · 89a32ab · 89a32ab
1 parent 2e30939
commit 89a32ab
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/react/scaffolds/noble-chain-combobox/noble-chain-combobox.tsx b/packages/react/scaffolds/noble-chain-combobox/noble-chain-combobox.tsx
@@ -67,14 +67,20 @@ export default function NobleChainCombobox<T extends object>(
     ...comboboxProps
   } = props;
   const { contains } = useFilter({ sensitivity: "base" });
-  const state = useComboBoxState({ ...comboboxProps, defaultFilter: contains });
+  const state = useComboBoxState({
+    ...comboboxProps,
+    defaultFilter: contains,
+    allowsEmptyCollection: true,
+  });
 
   const [isFocused, setIsFocused] = React.useState<boolean>(false);
   const containerRef = React.useRef(null);
   const buttonRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const listBoxRef = React.useRef(null);
-  const popoverRef = React.useRef(null);
+  const [popoverRef] = React.useState<HTMLDivElement>(
+    document.createElement("div"),
+  );
 
   const { inputProps, listBoxProps, labelProps } = useComboBox(
     {
@@ -89,7 +95,7 @@ export default function NobleChainCombobox<T extends object>(
       inputRef,
       buttonRef,
       listBoxRef,
-      popoverRef,
+      popoverRef: { current: popoverRef },
     },
     state,
   );

diff --git a/packages/react/stories/noble/NobleBaseComponents.stories.tsx b/packages/react/stories/noble/NobleBaseComponents.stories.tsx
@@ -135,6 +135,10 @@ export const Primary: Story = {
               variant: outlined, size: xl
             </NobleButton>
 
+            <NobleButton variant="solid" size="lg">
+              variant: outlined, size: lg
+            </NobleButton>
+
             <Stack space="$4">
               <NobleButton variant="tag" size="xs">
                 125