fix(popover): arrow glitch in popover content

.changeset/thin-points-sip.md

@@ -0,0 +1,5 @@
+---
+"@heroui/popover": patch
+---
+
+fix(popover): arrow glitch in popover content (#4142)

packages/components/popover/__tests__/popover.test.tsx

@@ -369,3 +369,40 @@ it("should close popover on scroll when shouldCloseOnScroll is false", async ()
   // assert that the popover is still open
   expect(popover).toHaveAttribute("aria-expanded", "true");
 });
+
+it("should display popover content only after content is ready", async () => {
+  jest.useFakeTimers();
+
+  const TestComponent = () => {
+    const [content, setContent] = React.useState("");
+
+    React.useEffect(() => {
+      const timer = setTimeout(() => {
+        setContent("test content");
+      }, 1000);
+
+      return () => clearTimeout(timer);
+    }, []);
+
+    return (
+      <Popover defaultOpen>
+        <PopoverTrigger>
+          <Button data-testid="trigger">Open popover</Button>
+        </PopoverTrigger>
+        <PopoverContent data-testid="content-test">{content}</PopoverContent>
+      </Popover>
+    );
+  };
+
+  const wrapper = render(<TestComponent />);
+
+  expect(wrapper.queryByTestId("content-test")).not.toBeInTheDocument();
+
+  act(() => {
+    jest.advanceTimersByTime(1000);
+  });
+
+  expect(wrapper.getByTestId("content-test")).toBeInTheDocument();
+
+  jest.useRealTimers();
+});

packages/components/popover/src/popover-content.tsx

@@ -15,7 +15,7 @@ import {usePopoverContext} from "./popover-context";
 export interface PopoverContentProps
   extends AriaDialogProps,
     Omit<HTMLHeroUIProps, "children" | "role"> {
-  children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
+  children?: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
 }
 
 const domAnimation = () => import("@heroui/dom-animation").then((res) => res.default);
@@ -47,14 +47,16 @@ const PopoverContent = (props: PopoverContentProps) => {
 
   const Component = as || OverlayComponent || "div";
 
-  const content = (
+  const content = children && (
     <>
       {!isNonModal && <DismissButton onDismiss={onClose} />}
-      <Component {...dialogProps}>
-        <div {...getContentProps({className})}>
-          {typeof children === "function" ? children(titleProps) : children}
-        </div>
-      </Component>
+      {
+        <Component {...dialogProps}>
+          <div {...getContentProps({className})}>
+            {typeof children === "function" ? children(titleProps) : children}
+          </div>
+        </Component>
+      }
       <DismissButton onDismiss={onClose} />
     </>
   );