Add AnchoredOverlay outside-top content growth regression fixture

e2e/components/AnchoredOverlay.test.ts

@@ -114,6 +114,11 @@ const stories: Array<{
     id: 'components-anchoredoverlay-dev--reposition-after-content-grows',
     waitForText: 'content with 300px height',
   },
+  {
+    title: 'Reposition After Content Grows With Outside Top',
+    id: 'components-anchoredoverlay-dev--reposition-after-content-grows-with-outside-top',
+    waitForText: 'content with 300px height',
+  },
   {
     title: 'Reposition After Content Grows Within Dialog',
     id: 'components-anchoredoverlay-dev--reposition-after-content-grows-within-dialog',

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

@@ -59,6 +59,56 @@ export const RepositionAfterContentGrows = () => {
   )
 }
 
+export const RepositionAfterContentGrowsWithOutsideTop = () => {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    if (!open) setLoading(true)
+    const timer = window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+    return () => window.clearTimeout(timer)
+  }, [open])
+
+  return (
+    <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 200px)'}}>
+      <div>
+        What to expect:
+        <ul>
+          <li>The anchored overlay should open above the anchor (outside-top)</li>
+          <li>After 2000ms, the amount of content in the overlay grows</li>
+          <li>The overlay should grow upward, staying attached at the bottom to the anchor</li>
+          <li>Bug: without fix, the overlay briefly flickers downward before repositioning</li>
+        </ul>
+      </div>
+      <AnchoredOverlay
+        renderAnchor={props => (
+          <Button {...props} style={{width: 'fit-content'}}>
+            Button
+          </Button>
+        )}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => {
+          setOpen(false)
+          setLoading(true)
+        }}
+        side="outside-top"
+      >
+        {loading ? (
+          <>
+            <Spinner />
+            loading for 2000ms
+          </>
+        ) : (
+          <div style={{height: '300px'}}>content with 300px height</div>
+        )}
+      </AnchoredOverlay>
+    </Stack>
+  )
+}
+
 export const ScrollRecalculation = () => {
   const [open, setOpen] = useState(false)
 

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

@@ -356,7 +356,6 @@ export const RepositionAfterLoading = () => {
   const [loading, setLoading] = useState(true)
 
   React.useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (!open) setLoading(true)
     window.setTimeout(() => {
       if (open) {
@@ -369,7 +368,6 @@ export const RepositionAfterLoading = () => {
 
   React.useEffect(() => {
     if (!loading) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -405,7 +403,6 @@ export const SelectPanelRepositionInsideDialog = () => {
   const [loading, setLoading] = useState(true)
 
   React.useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (!open) setLoading(true)
     window.setTimeout(() => {
       if (open) {
@@ -418,7 +415,6 @@ export const SelectPanelRepositionInsideDialog = () => {
 
   React.useEffect(() => {
     if (!loading) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
       setFilteredItems(items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -438,7 +434,6 @@ export const SelectPanelRepositionInsideDialog = () => {
           selected={selected}
           onSelectedChange={setSelected}
           onFilterChange={setFilter}
-          overlayProps={{anchorSide: 'outside-top'}}
           message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
         />
       </Stack>
@@ -624,7 +619,6 @@ export const VirtualizedConsumerSide = () => {
     [open],
   )
 
-  // eslint-disable-next-line react-hooks/incompatible-library
   const virtualizer = useVirtualizer({
     count: filteredItems.length,
     getScrollElement: () => scrollContainer ?? null,

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -2291,3 +2291,159 @@
     expect(lastCall[2]?.displayInViewport).not.toBe(true)
   })
 })
+
+/**
+ * Test suite for SelectPanel first-open sizing regression
+ * Issue: https://github.com/primer/react/issues/1831
+ *
+ * On first open with loading state, SelectPanel may render shorter than its content
+ * and show an unnecessary scrollbar. This occurs because position is calculated before
+ * items have loaded and rendered, using the spinner/loading state height rather than
+ * the final content height.
+ */
+describe('SelectPanel - First-Open Sizing with Loading State', () => {
+  const items: ItemInput[] = [
+    {id: '1', text: 'Item 1'},
+    {id: '2', text: 'Item 2'},
+    {id: '3', text: 'Item 3'},
+    {id: '4', text: 'Item 4'},
+    {id: '5', text: 'Item 5'},
+    {id: '6', text: 'Item 6'},
+    {id: '7', text: 'Item 7'},
+    {id: '8', text: 'Item 8'},
+  ]
+
+  const TestComponentWithLoadingDelay = () => {
+    const [selected, setSelected] = React.useState<ItemInput | undefined>(items[0])
+    const [open, setOpen] = React.useState(false)
+    const [loading, setLoading] = React.useState(true)
+    const [visibleItems, setVisibleItems] = React.useState<ItemInput[]>([])
+
+    // Simulate items loading after a delay (typical async data fetch)
+    React.useEffect(() => {
+      if (!open) {
+        setLoading(true)
+        setVisibleItems([])
+      }
+
+      const timer = setTimeout(() => {
+        if (open) {
+          setVisibleItems(items)
+          setLoading(false)
+        }
+      }, 500) // 500ms delay simulates network/async operation
+
+      return () => clearTimeout(timer)
+    }, [open])
+
+    return (
+      <>
+        <SelectPanel
+          title="Select item"
+          open={open}
+          onOpenChange={setOpen}
+          loading={loading}
+          items={visibleItems}
+          selected={selected}
+          onSelectedChange={setSelected}
+          height="large"
+        />
+        <div data-testid="state">
+          open:{open} loading:{loading} itemsCount:{visibleItems.length}
+        </div>
+      </>
+    )
+  }
+
+  it('should measure overlay height correctly while loading', async () => {
+    const user = userEvent.setup()
+    render(<TestComponentWithLoadingDelay />)
+
+    const button = screen.getByRole('button', {name: /Select item/i})
+
+    // Open SelectPanel for the first time
+    await user.click(button)
+
+    // Wait for overlay to appear (should show loading spinner)
+    await waitFor(
+      () => {
+        expect(screen.getByText(/^Item 1$/)).toBeInTheDocument()
+      },
+      {timeout: 1000},
+    )
+
+    // Get overlay measurements while still loading
+    const overlay = document.querySelector('[data-testid="overlay"]') as HTMLElement | null
+    const clientHeightWhileLoading = overlay?.clientHeight
+    const scrollHeightWhileLoading = overlay?.scrollHeight
+
+    // Wait for items to load
+    await waitFor(
+      () => {
+        const state = screen.getByTestId('state')
+        expect(state).toHaveTextContent('loading:false')
+      },
+      {timeout: 1500},
+    )
+
+    // Get overlay measurements after loading
+    const clientHeightAfterLoading = overlay?.clientHeight
+    const scrollHeightAfterLoading = overlay?.scrollHeight
+
+    // Log measurements for debugging
+    console.log('First-open sizing measurements:', {
+      whileLoading: {clientHeight: clientHeightWhileLoading, scrollHeight: scrollHeightWhileLoading},
+      afterLoading: {clientHeight: clientHeightAfterLoading, scrollHeight: scrollHeightAfterLoading},
+    })
+
+    // The overlay should have enough height to fit all content without scrollbar
+    if (clientHeightAfterLoading && scrollHeightAfterLoading) {
+      const hasScrollbar = scrollHeightAfterLoading > clientHeightAfterLoading
+      expect(hasScrollbar).toBe(false)
+    }
+  })
+
+  it('should have consistent height between first and second open', async () => {
+    const user = userEvent.setup()
+    const {unmount, rerender} = render(<TestComponentWithLoadingDelay />)
+
+    const button = screen.getByRole('button', {name: /Select item/i})
+
+    // First open
+    await user.click(button)
+    await waitFor(() => {
+      const state = screen.getByTestId('state')
+      expect(state).toHaveTextContent('loading:false')
+    })
+
+    const overlay1 = document.querySelector('[data-testid="overlay"]')
+    const height1 = overlay1?.getBoundingClientRect().height
+
+    // Close
+    await user.click(button)
+    await waitFor(() => {
+      const state = screen.getByTestId('state')
+      expect(state).toHaveTextContent('open:false')
+    })
+
+    // Second open (loading state happens again)
+    await user.click(button)
+    await waitFor(
+      () => {
+        const state = screen.getByTestId('state')
+        expect(state).toHaveTextContent('loading:false')
+      },
+      {timeout: 1500},
+    )
+
+    const overlay2 = document.querySelector('[data-testid="overlay"]')
+    const height2 = overlay2?.getBoundingClientRect().height
+
+    // Heights should be very similar (allowing for minor variations)
+    if (height1 && height2) {
+      const difference = Math.abs(height1 - height2)
+      console.log(`Height consistency check: first=${height1}px, second=${height2}px, diff=${difference}px`)
+      expect(difference).toBeLessThan(50) // Allow max 50px variance
+    }
+  })
+})