From 90086f8c86b30f62c3a7d6deac1008cfbe66de74 Mon Sep 17 00:00:00 2001 From: Guillaume Cornut Date: Thu, 6 Feb 2025 21:40:39 +0100 Subject: [PATCH] fix(popover): fix improper first placment on React 18 --- CHANGELOG.md | 4 ++++ .../lumx-react/src/components/popover/usePopoverStyle.tsx | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 91a3666b1..863e69763 100644 --- 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 index da251dc79..c37252773 100644 --- 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); - const [arrowElement, setArrowElement] = useState(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.opacity = 0; + return newStyles; }, [style, styles.popper, zIndex, fitWithinViewportHeight]); + return { styles: { arrow: styles.arrow, popover: popoverStyle }, attributes,