experimental/SelectPanel: Update anchored position after showModal

.changeset/proud-walls-study.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+exerimental/SelectPanel: Fix anchored position when close to the edge of browser window

packages/react/src/Overlay/Overlay.tsx

@@ -71,7 +71,9 @@ export const StyledOverlay = styled.div<StyledOverlayProps>`
   border-radius: 12px;
   overflow: ${props => (props.overflow ? props.overflow : 'hidden')};
   animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};
+  animation-fill-mode: forwards;
 
+  opacity: 0;
   @keyframes overlay-appear {
     0% {
       opacity: 0;

packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx

@@ -847,6 +847,37 @@ export const NestedSelection = () => {
   )
 }
 
+export const ReproAtTheEdge = () => {
+  const [selectedTag, setSelectedTag] = React.useState<string>()
+
+  const onSubmit = () => {
+    if (!selectedTag) return
+    data.ref = selectedTag // pretending to persist changes
+  }
+
+  const itemsToShow = data.tags
+
+  return (
+    <>
+      <h1>SelectPanel at the edge</h1>
+
+      <Box sx={{display: 'flex', justifyContent: 'right'}}>
+        <SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit}>
+          <SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
+
+          <ActionList>
+            {itemsToShow.map(tag => (
+              <ActionList.Item key={tag.id} onSelect={() => setSelectedTag(tag.id)} selected={selectedTag === tag.id}>
+                {tag.name}
+              </ActionList.Item>
+            ))}
+          </ActionList>
+        </SelectPanel>
+      </Box>
+    </>
+  )
+}
+
 export const CreateNewRow = () => {
   const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
   const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)

packages/react/src/drafts/SelectPanel2/SelectPanel.tsx

@@ -164,11 +164,31 @@ const Panel: React.FC<SelectPanelProps> = ({
   /* Dialog */
   const dialogRef = React.useRef<HTMLDialogElement>(null)
 
+  /* Anchored position */
+  const {position, updatePosition} = useAnchoredPosition(
+    {
+      anchorElementRef: anchorRef,
+      floatingElementRef: dialogRef,
+      side: 'outside-bottom',
+      align: 'start',
+    },
+    [
+      /* 
+        Because we call dialog.showModal() to open the dialog, 
+        we need to wait until the browser opens the dialog (giving it dimensions)
+        before updating position. (it is 0px by 0px until opened)
+        This is why we explicitly call updatePosition instead of using dependencies.
+      */
+    ],
+  )
+
   // sync dialog open state (imperative) with internal component state
   React.useEffect(() => {
-    if (internalOpen) dialogRef.current?.showModal()
-    else if (dialogRef.current?.open) dialogRef.current.close()
-  }, [internalOpen])
+    if (internalOpen) {
+      dialogRef.current?.showModal()
+      updatePosition() // update the position once the dialog is open
+    } else if (dialogRef.current?.open) dialogRef.current.close()
+  }, [internalOpen, updatePosition])
 
   // dialog handles Esc automatically, so we have to sync internal state
   // but it doesn't call onCancel, so have another effect for that!
@@ -202,17 +222,6 @@ const Panel: React.FC<SelectPanelProps> = ({
     [internalOpen],
   )
 
-  /* Anchored */
-  const {position} = useAnchoredPosition(
-    {
-      anchorElementRef: anchorRef,
-      floatingElementRef: dialogRef,
-      side: 'outside-bottom',
-      align: 'start',
-    },
-    [internalOpen, anchorRef.current, dialogRef.current],
-  )
-
   /* 
     We want to cancel and close the panel when user clicks outside.
     See decision log: https://github.com/github/primer/discussions/2614#discussioncomment-8544561
@@ -233,6 +242,10 @@ const Panel: React.FC<SelectPanelProps> = ({
         maxHeight={maxHeight}
         data-variant={currentVariant}
         sx={{
+          // to avoid a visible position shift, we delay the overlay animating-in
+          // to wait until the correct position is set (see useAnchoredPosition above for more)
+          animationDelay: '16ms',
+
           '--max-height': heightMap[maxHeight],
           // reset dialog default styles
           border: 'none',

packages/react/src/hooks/useAnchoredPosition.ts

@@ -26,6 +26,7 @@ export function useAnchoredPosition(
   floatingElementRef: React.RefObject<Element>
   anchorElementRef: React.RefObject<Element>
   position: AnchorPosition | undefined
+  updatePosition: () => void
 } {
   const floatingElementRef = useProvidedRefOrCreate(settings?.floatingElementRef)
   const anchorElementRef = useProvidedRefOrCreate(settings?.anchorElementRef)
@@ -51,5 +52,6 @@ export function useAnchoredPosition(
     floatingElementRef,
     anchorElementRef,
     position,
+    updatePosition,
   }
 }