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

lumapps · Feb 7, 2025 · 8740bee · 8740bee
1 parent 9b1cbb6
commit 8740bee
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
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/Popover.tsx b/packages/lumx-react/src/components/popover/Popover.tsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
-import { DOCUMENT } from '@lumx/react/constants';
+import { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
@@ -168,6 +168,8 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
                           elevation: Math.min(elevation || 0, 5),
                           position,
                       }),
+                      // Do not show the popover while it's not properly placed
+                      !styles.popover?.transform ? VISUALLY_HIDDEN : undefined,
                   )}
                   style={styles.popover}
                   {...attributes.popper}

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)];
@@ -152,6 +151,7 @@ export function usePopoverStyle({
 
         return newStyles;
     }, [style, styles.popper, zIndex, fitWithinViewportHeight]);
+
     return {
         styles: { arrow: styles.arrow, popover: popoverStyle },
         attributes,