Fix experimental SelectPanel anchoring behavior

primer · Jan 24, 2025 · ff93686 · ff93686
1 parent 88ffc0d
commit ff93686
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css
@@ -8,6 +8,14 @@
   --position-top: 0;
   --position-left: 0;
 
+  &[data-visibility='visible'] {
+    visibility: visible;
+  }
+
+  &[data-visibility='hidden'] {
+    visibility: hidden;
+  }
+
   &:where([open]) {
     display: flex; /* to fit children */
   }

diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -29,6 +29,7 @@ import {clsx} from 'clsx'
 import {useFeatureFlag} from '../../FeatureFlags'
 
 import classes from './SelectPanel.module.css'
+import type {PositionSettings} from '@primer/behaviors'
 
 const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
 
@@ -66,6 +67,7 @@ export type SelectPanelProps = {
   defaultOpen?: boolean
   open?: boolean
   anchorRef?: React.RefObject<HTMLButtonElement>
+  anchoredPositionSettings?: Partial<PositionSettings>
 
   onCancel?: () => void
   onClearSelection?: undefined | (() => void)
@@ -89,6 +91,7 @@ const Panel: React.FC<SelectPanelProps> = ({
   defaultOpen = false,
   open: propsOpen,
   anchorRef: providedAnchorRef,
+  anchoredPositionSettings,
 
   onCancel: propsOnCancel,
   onClearSelection: propsOnClearSelection,
@@ -228,6 +231,7 @@ const Panel: React.FC<SelectPanelProps> = ({
       floatingElementRef: dialogRef,
       side: 'outside-bottom',
       align: 'start',
+      ...anchoredPositionSettings,
     },
     [internalOpen, anchorRef.current, dialogRef.current],
   )
@@ -245,6 +249,20 @@ const Panel: React.FC<SelectPanelProps> = ({
     maxHeightValue = '100vh'
   }
 
+  const [isVisible, setIsVisible] = useState(internalOpen)
+
+  useEffect(() => {
+    if (internalOpen) {
+      // give the browser time to render the panel and for useAnchoredPosition
+      // to calculate its actual size
+      window.requestAnimationFrame(() => {
+        setIsVisible(true)
+      })
+    } else {
+      setIsVisible(false)
+    }
+  }, [internalOpen, setIsVisible])
+
   return (
     <>
       {Anchor}
@@ -258,10 +276,18 @@ const Panel: React.FC<SelectPanelProps> = ({
         height="fit-content"
         maxHeight={maxHeight}
         data-variant={currentVariant}
+        data-visibility={isVisible ? 'visible' : 'hidden'}
         sx={
           enabled
             ? undefined
             : {
+                '&[data-visibility="visible"]': {
+                  visibility: 'visible',
+                },
+                '&[data-visibility="hidden"]': {
+                  visibility: 'hidden',
+                },
+
                 '--max-height': heightMap[maxHeight],
                 // reset dialog default styles
                 border: 'none',

diff --git a/packages/react/src/hooks/useAnchoredPosition.ts b/packages/react/src/hooks/useAnchoredPosition.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {type RefObject} from 'react'
 import {getAnchoredPosition} from '@primer/behaviors'
 import type {AnchorPosition, PositionSettings} from '@primer/behaviors'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
@@ -45,8 +45,12 @@ export function useAnchoredPosition(
 
   useLayoutEffect(updatePosition, [updatePosition])
 
+  // recalculate position if viewport changes size
   useResizeObserver(updatePosition)
 
+  // recalculate position if the floating element changes size
+  useResizeObserver(updatePosition, floatingElementRef as RefObject<HTMLElement>)
+
   return {
     floatingElementRef,
     anchorElementRef,