Fix #4027

packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {FocusKeys} from '@primer/behaviors'
 
-import {Avatar, Box, Link, Text} from '..'
+import {Avatar, Box, Dialog, Link, Spinner, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import Heading from '../Heading'
 import Octicon from '../Octicon'
@@ -301,3 +301,99 @@ export const OverlayPropsOverrides = () => {
     </AnchoredOverlay>
   )
 }
+
+export const RepositionAfterContentGrows = () => {
+  const [open, setOpen] = useState(false)
+
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 200px)'}}>
+      <div>
+        What to expect:
+        <ul>
+          <li>The anchored overlay should open below the anchor (default position)</li>
+          <li>After 2000ms, the amount of content in the overlay grows</li>
+          <li>the overlay should reposition itself above the anchor so that it stays inside the window</li>
+        </ul>
+      </div>
+      <AnchoredOverlay
+        renderAnchor={props => (
+          <Button {...props} sx={{width: 'fit-content'}}>
+            Button
+          </Button>
+        )}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => {
+          setOpen(false)
+          setLoading(true)
+        }}
+      >
+        {loading ? (
+          <>
+            <Spinner />
+            loading for 2000ms
+          </>
+        ) : (
+          <div style={{height: '300px'}}>content with 300px height</div>
+        )}
+      </AnchoredOverlay>
+    </Stack>
+  )
+}
+
+export const RepositionAfterContentGrowsWithinDialog = () => {
+  const [open, setOpen] = useState(false)
+
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Dialog onClose={() => {}}>
+      <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 300px)'}}>
+        <div>
+          What to expect:
+          <ul>
+            <li>The anchored overlay should open below the anchor (default position)</li>
+            <li>After 2000ms, the amount of content in the overlay grows</li>
+            <li>the overlay should reposition itself above the anchor so that it stays inside the window</li>
+          </ul>
+        </div>
+        <AnchoredOverlay
+          renderAnchor={props => (
+            <Button {...props} sx={{width: 'fit-content'}}>
+              Button
+            </Button>
+          )}
+          open={open}
+          onOpen={() => setOpen(true)}
+          onClose={() => {
+            setOpen(false)
+            setLoading(true)
+          }}
+        >
+          {loading ? (
+            <>
+              <Spinner />
+              loading for 2000ms
+            </>
+          ) : (
+            <div style={{height: '300px'}}>content with 300px height</div>
+          )}
+        </AnchoredOverlay>
+      </Stack>
+    </Dialog>
+  )
+}

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -107,7 +107,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   overlayProps,
   focusTrapSettings,
   focusZoneSettings,
-  side = 'outside-bottom',
+  side = overlayProps?.['anchorSide'] || 'outside-bottom',
   align = 'start',
   alignmentOffset,
   anchorOffset,

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

@@ -7,6 +7,8 @@ import {SelectPanel} from './SelectPanel'
 import type {OverlayProps} from '../Overlay'
 import {TriangleDownIcon} from '@primer/octicons-react'
 import {ActionList} from '../deprecated/ActionList'
+import {Stack} from '../Stack'
+import {Dialog} from '../experimental'
 
 const meta = {
   title: 'Components/SelectPanel/Examples',
@@ -345,3 +347,72 @@ export const ItemsInScope = () => {
     </>
   )
 }
+
+export const RepositionAfterLoading = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [open, setOpen] = useState(false)
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    if (!open) setLoading(true)
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <>
+      <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 300px)', width: 'fit-content'}}>
+        <h1>Reposition panel after loading</h1>
+        <SelectPanel
+          loading={loading}
+          title="Select labels"
+          placeholderText="Filter Labels"
+          open={open}
+          onOpenChange={setOpen}
+          items={filteredItems}
+          selected={selected}
+          onSelectedChange={setSelected}
+          onFilterChange={setFilter}
+        />
+      </Stack>
+    </>
+  )
+}
+
+export const SelectPanelRepositionInsideDialog = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [open, setOpen] = useState(false)
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    if (!open) setLoading(true)
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Dialog title="SelectPanel reposition after loading inside Dialog" onClose={() => {}}>
+      <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 500px)', width: 'fit-content'}}>
+        <p>other content</p>
+        <SelectPanel
+          loading={loading}
+          title="Select labels"
+          placeholderText="Filter Labels"
+          open={open}
+          onOpenChange={setOpen}
+          items={filteredItems}
+          selected={selected}
+          onSelectedChange={setSelected}
+          onFilterChange={setFilter}
+          overlayProps={{anchorSide: 'outside-top'}}
+        />
+      </Stack>
+    </Dialog>
+  )
+}

packages/react/src/hooks/useAnchoredPosition.ts

@@ -45,7 +45,8 @@ export function useAnchoredPosition(
 
   useLayoutEffect(updatePosition, [updatePosition])
 
-  useResizeObserver(updatePosition)
+  useResizeObserver(updatePosition) // watches for changes in window size
+  useResizeObserver(updatePosition, floatingElementRef as React.RefObject<HTMLElement>) // watches for changes in floating element size
 
   return {
     floatingElementRef,

packages/react/src/hooks/useResizeObserver.ts

@@ -16,8 +16,9 @@ export function useResizeObserver<T extends HTMLElement>(callback: ResizeObserve
     savedCallback.current = callback
   })
 
+  const targetEl = target && 'current' in target ? target.current : document.documentElement
+
   useLayoutEffect(() => {
-    const targetEl = target && 'current' in target ? target.current : document.documentElement
     if (!targetEl) {
       return
     }
@@ -31,5 +32,5 @@ export function useResizeObserver<T extends HTMLElement>(callback: ResizeObserve
     return () => {
       observer.disconnect()
     }
-  }, [target])
+  }, [targetEl])
 }