From 492ade107531bcf2388d8cbbdb3ebba9eb3aaed7 Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Tue, 2 Dec 2025 02:06:47 +0000
Subject: [PATCH 1/2] ensure the MappedActionListItem component is a ForwardRef
 Componennt

---
 .../FilteredActionList/FilteredActionList.tsx  |  8 ++++----
 .../SelectPanel.examples.stories.tsx           | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index eceecae8dd3..f5f1275bd7c 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -2,7 +2,7 @@ import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {scrollIntoView, FocusKeys} from '@primer/behaviors'
 import type {KeyboardEventHandler, JSX} from 'react'
 import type React from 'react'
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {ActionList, type ActionListProps} from '../ActionList'
@@ -426,8 +426,7 @@ export function FilteredActionList({
     </div>
   )
 }
-
-function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
+const MappedActionListItem = forwardRef<HTMLLIElement, ItemInput & {renderItem?: RenderItemFn}>((item, ref) => {
   // keep backward compatibility for renderItem
   // escape hatch for custom Item rendering
   if (typeof item.renderItem === 'function') return item.renderItem(item)
@@ -455,6 +454,7 @@ function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
           onAction(item, e as React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>)
       }}
       data-id={id}
+      ref={ref}
       {...rest}
     >
       {LeadingVisual ? (
@@ -481,6 +481,6 @@ function MappedActionListItem(item: ItemInput & {renderItem?: RenderItemFn}) {
       ) : null}
     </ActionList.Item>
   )
-}
+})
 
 FilteredActionList.displayName = 'FilteredActionList'
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 455fc1d2bfa..64f6c723f75 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -475,6 +475,14 @@ export const WithDefaultMessage = () => {
 
 const NUMBER_OF_ITEMS = 1800
 const lotsOfItems = Array.from({length: NUMBER_OF_ITEMS}, (_, index) => {
+  if (index === 5) {
+    return {
+      id: index,
+      text: `This is being used to show what would happen if you returned an item that needed text wrapping`,
+      description: `Description ${index}`,
+      leadingVisual: getColorCircle('#a2eeef'),
+    }
+  }
   return {
     id: index,
     text: `Item ${index}`,
@@ -620,8 +628,10 @@ export const Virtualized = () => {
     getScrollElement: () => scrollContainer ?? null,
     estimateSize: () => DEFAULT_VIRTUAL_ITEM_HEIGHT,
     overscan: 10,
-    debug: true,
     enabled: renderSubset,
+    measureElement: el => {
+      return (el as HTMLElement).scrollHeight
+    },
   })
 
   const virtualizedContainerStyle = useMemo(
@@ -645,6 +655,12 @@ export const Virtualized = () => {
             return {
               ...item,
               key: virtualItem.index,
+              'data-index': virtualItem.index,
+              ref: (node: Element | null) => {
+                if (node && node.getAttribute('data-index')) {
+                  virtualizer.measureElement(node)
+                }
+              },
               style: {
                 position: 'absolute',
                 top: 0,

From 142f013ca60f590efc1c9b0012bee8950916bd0b Mon Sep 17 00:00:00 2001
From: Kendall Gassner <kendallgassner@github.com>
Date: Tue, 2 Dec 2025 02:08:22 +0000
Subject: [PATCH 2/2] changeset

---
 .changeset/dry-pets-appear.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dry-pets-appear.md

diff --git a/.changeset/dry-pets-appear.md b/.changeset/dry-pets-appear.md
new file mode 100644
index 00000000000..4f49d2a589a
--- /dev/null
+++ b/.changeset/dry-pets-appear.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Make MappedActionListItem a forwardRef component