Add focusPrependedElements prop to useFocusZone, FilteredActionList, and SelectPanel

.changeset/green-dryers-flow.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add focusPrependedElements prop to useFocusZone, FilteredActionList, and SelectPanel

packages/react/package.json

@@ -79,7 +79,7 @@
     "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
     "@oddbird/popover-polyfill": "^0.5.2",
-    "@primer/behaviors": "^1.9.0",
+    "@primer/behaviors": "^1.9.1",
     "@primer/live-region-element": "^0.7.1",
     "@primer/octicons-react": "^19.21.0",
     "@primer/primitives": "10.x || 11.x",

packages/react/src/FilteredActionList/FilteredActionList.tsx

@@ -101,6 +101,11 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
    * If false, sets initial focus to the first item in the list when rendered, enabling keyboard navigation immediately.
    */
   setInitialFocus?: boolean
+  /**
+   * Set to true to allow focus to move to elements that are dynamically prepended to the container.
+   * Default is false.
+   */
+  focusPrependedElements?: boolean
 }
 
 export function FilteredActionList({
@@ -130,6 +135,7 @@ export function FilteredActionList({
   onActiveDescendantChanged,
   disableSelectOnHover = false,
   setInitialFocus = false,
+  focusPrependedElements,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -260,9 +266,10 @@ export function FilteredActionList({
           },
           focusInStrategy: setInitialFocus ? 'initial' : 'previous',
           ignoreHoverEvents: disableSelectOnHover,
+          focusPrependedElements,
         }
       : undefined,
-    [listContainerElement, usingRovingTabindex, onActiveDescendantChanged],
+    [listContainerElement, usingRovingTabindex, onActiveDescendantChanged, focusPrependedElements],
   )
 
   useEffect(() => {

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -118,6 +118,11 @@ interface SelectPanelBaseProps {
    */
   disableFullscreenOnNarrow?: boolean
   showSelectAll?: boolean
+  /**
+   * Set to true to allow focus to move to elements that are dynamically prepended to the container.
+   * Default is false.
+   */
+  focusPrependedElements?: boolean
 }
 
 // onCancel is optional with variant=anchored, but required with variant=modal
@@ -193,6 +198,7 @@ function Panel({
   disableFullscreenOnNarrow,
   align,
   showSelectAll = false,
+  focusPrependedElements,
   ...listProps
 }: SelectPanelProps): JSX.Element {
   const titleId = useId()
@@ -884,6 +890,7 @@ function Panel({
             }}
             fullScreenOnNarrow={usingFullScreenOnNarrow}
             className={clsx(className, classes.FilteredActionList)}
+            focusPrependedElements={focusPrependedElements}
           />
           {footer ? (
             <div className={classes.Footer}>{footer}</div>

packages/react/src/hooks/useFocusZone.ts

@@ -23,6 +23,11 @@ export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDe
    * any time.
    */
   disabled?: boolean
+
+  /**
+   * Set to true to allow focus to move to elements that are dynamically prepended to the container.
+   */
+  focusPrependedElements?: boolean
 }
 
 export function useFocusZone(