fix: Focus the 'listbox', not the 'dialog'

Author: smockle

src/ActionList/List.tsx

@@ -132,7 +132,7 @@ function useListVariant(variant: ListProps['variant'] = 'inset'): {
 /**
  * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
  */
-export function List(props: ListProps): JSX.Element {
+export const List = React.forwardRef<HTMLDivElement, ListProps>((props, ref): JSX.Element => {
   // Get `sx` prop values for `List` children matching the given `List` style variation.
   const {firstGroupStyle, lastGroupStyle, headerStyle, itemStyle} = useListVariant(props.variant)
 
@@ -216,7 +216,7 @@ export function List(props: ListProps): JSX.Element {
   }
 
   return (
-    <StyledList {...props}>
+    <StyledList {...props} ref={ref}>
       {groups.map(({header, ...groupProps}, index) => {
         const hasFilledHeader = header?.variant === 'filled'
         const shouldShowDivider = index > 0 && !hasFilledHeader
@@ -242,4 +242,4 @@ export function List(props: ListProps): JSX.Element {
       })}
     </StyledList>
   )
-}
+})

src/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react'
+import React, {useCallback, useMemo, useState, useRef} from 'react'
 import {List, GroupedListProps, ListPropsBase, ItemInput} from '../ActionList/List'
 import {DropdownButton, DropdownButtonProps} from './DropdownButton'
 import {ItemProps} from '../ActionList/Item'
@@ -84,15 +84,18 @@ export function DropdownMenu({
     })
   }, [items, onChange, onClose, selectedItem])
 
+  const listRef = useRef<HTMLDivElement>(null)
+
   return (
     <AnchoredOverlay
       renderAnchor={renderMenuAnchor}
       open={open}
       onOpen={onOpen}
       onClose={onClose}
       overlayProps={overlayProps}
+      focusTrapSettings={{initialFocusRef: listRef}}
     >
-      <List {...listProps} role="listbox" items={itemsToRender} />
+      <List {...listProps} ref={listRef} role="listbox" items={itemsToRender} />
     </AnchoredOverlay>
   )
 }