fix(popover): fix improper first placment on React 18

lumapps · Feb 7, 2025 · 24a62a3 · 24a62a3
1 parent 9b1cbb6
commit 24a62a3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   `Popover`: fix improper first placement on React 18
+
 ## [3.11.0][] - 2025-02-05
 
 ### Added

diff --git a/packages/lumx-react/src/components/popover/usePopoverStyle.tsx b/packages/lumx-react/src/components/popover/usePopoverStyle.tsx
@@ -103,7 +103,6 @@ export function usePopoverStyle({
     zIndex,
 }: Options): Output {
     const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);
-
     const [arrowElement, setArrowElement] = useState<null | HTMLElement>(null);
 
     const actualOffset: [number, number] = [offset?.along ?? 0, (offset?.away ?? 0) + (hasArrow ? ARROW_SIZE : 0)];
@@ -150,8 +149,12 @@ export function usePopoverStyle({
             newStyles.maxHeight = WINDOW?.innerHeight || DOCUMENT?.documentElement.clientHeight;
         }
 
+        // Do not show the popover while it's not properly placed
+        if (!newStyles.transform) newStyles.visibility = 'hidden';
+
         return newStyles;
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
+
     return {
         styles: { arrow: styles.arrow, popover: popoverStyle },
         attributes,