fix: Autocomplete 'tab' key forwarding #7724

snowystinger · 2025-02-05T04:20:50Z

Closes #7619

First bug of #7619 (comment)

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

rspbot · 2025-02-05T05:04:54Z

Build successful! 🎉

rspbot · 2025-02-05T05:06:52Z

Build successful! 🎉

packages/@react-aria/autocomplete/src/useAutocomplete.ts

rspbot · 2025-02-07T00:36:58Z

Build successful! 🎉

devongovett

hopefully this doesn't cause conflicts with Daniel's PR... but I guess we can merge it separately 🤷

packages/react-aria-components/test/Autocomplete.test.tsx

rspbot · 2025-02-10T21:11:29Z

Build successful! 🎉

rspbot · 2025-02-10T21:11:31Z

## API Changes

react-aria-components

/react-aria-components:Breadcrumbs

 Breadcrumbs <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   style?: CSSProperties
 }

/react-aria-components:GridList

 GridList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:Section

 Section <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<T>
   style?: CSSProperties
   value?: {}

/react-aria-components:Collection

 Collection <T extends {}> {
   addIdAndValue?: boolean
   children?: ReactNode | ({}) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<{}>
 }

/react-aria-components:ListBox

 ListBox <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ListBoxSection

 ListBoxSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/react-aria-components:Menu

 Menu <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   items?: Iterable<T>
   onClose?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties
 }

/react-aria-components:MenuSection

 MenuSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/react-aria-components:Row

 Row <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: string | ((RowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Iterable<{}>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((RowRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: {}
 }

/react-aria-components:TableHeader

 TableHeader <T extends {}> {
   children?: ReactNode | ({}) => ReactElement
   className?: string | ((TableHeaderRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  columns?: Iterable<{}>
-  dependencies?: ReadonlyArray<any>
+  columns?: Array<{}>
+  dependencies?: Array<any>
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((TableHeaderRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:TableBody

 TableBody <T extends {}> {
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TableBodyRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   items?: Iterable<{}>
   renderEmptyState?: (TableBodyRenderProps) => ReactNode
   style?: CSSProperties | ((TableBodyRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:TabList

 TabList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TabListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   style?: CSSProperties | ((TabListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined

/react-aria-components:TagList

 TagList <T extends {}> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TagListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   renderEmptyState?: (TagListRenderProps) => ReactNode
   style?: CSSProperties | ((TagListRenderProps & {
     defaultStyle: CSSProperties
 }

/react-aria-components:UNSTABLE_Tree

 UNSTABLE_Tree <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:BreadcrumbsProps

 BreadcrumbsProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   style?: CSSProperties
 }

/react-aria-components:GridListProps

 GridListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:SectionProps

 SectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<T>
   style?: CSSProperties
   value?: T

/react-aria-components:ListBoxProps

 ListBoxProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ListBoxSectionProps

 ListBoxSectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<T>
   style?: CSSProperties
   value?: T

/react-aria-components:MenuProps

 MenuProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   items?: Iterable<T>
   onClose?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties
 }

/react-aria-components:MenuSectionProps

 MenuSectionProps <T> {
   aria-label?: string
   children?: ReactNode | (T) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<T>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: T
 }

/react-aria-components:TableHeaderProps

 TableHeaderProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: string | ((TableHeaderRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  columns?: Iterable<T>
-  dependencies?: ReadonlyArray<any>
+  columns?: Array<T>
+  dependencies?: Array<any>
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   style?: CSSProperties | ((TableHeaderRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:TableBodyProps

 TableBodyProps <T> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TableBodyRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   items?: Iterable<T>
   renderEmptyState?: (TableBodyRenderProps) => ReactNode
   style?: CSSProperties | ((TableBodyRenderProps & {
 })) => CSSProperties | undefined
 }

/react-aria-components:RowProps

 RowProps <T> {
   children?: ReactNode | (T) => ReactElement
   className?: string | ((RowRenderProps & {
     defaultClassName: string | undefined
 })) => string
   columns?: Iterable<T>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   download?: boolean | string
   href?: Href
   hrefLang?: string
   id?: Key
   onAction?: () => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   style?: CSSProperties | ((RowRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target?: HTMLAttributeAnchorTarget
   textValue?: string
   value?: T
 }

/react-aria-components:TabListProps

 TabListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TabListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   style?: CSSProperties | ((TabListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined

/react-aria-components:TagListProps

 TagListProps <T> {
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TagListRenderProps & {
     defaultClassName: string | undefined
 })) => string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   renderEmptyState?: (TagListRenderProps) => ReactNode
   style?: CSSProperties | ((TagListRenderProps & {
     defaultStyle: CSSProperties
 }

/react-aria-components:TreeProps

 TreeProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

@react-aria/collections

/@react-aria/collections:Collection

 Collection <T extends {}> {
   addIdAndValue?: boolean
   children?: ReactNode | ({}) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<{}>
 }

/@react-aria/collections:CollectionProps

 CollectionProps <T> {
   addIdAndValue?: boolean
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<T>
 }

/@react-aria/collections:CachedChildrenOptions

 CachedChildrenOptions <T> {
   addIdAndValue?: boolean
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<T>
 }

@react-aria/dnd

/@react-aria/dnd:ClipboardProps

 ClipboardProps {
-  getItems?: ({
-    type: 'cut' | 'copy'
-}) => Array<DragItem>
+  getItems?: () => Array<DragItem>
   isDisabled?: boolean
   onCopy?: () => void
   onCut?: () => void
   onPaste?: (Array<DropItem>) => void

@react-aria/utils

/@react-aria/utils:createShadowTreeWalker

-createShadowTreeWalker {
-  doc: Document
-  root: Node
-  whatToShow?: number
-  filter?: NodeFilter | null
-  returnVal: undefined
-}

/@react-aria/utils:ShadowTreeWalker

-ShadowTreeWalker {
-  constructor: (Document, Node, number, NodeFilter | null) => void
-  currentNode: Node
-  doc: Document
-  filter: NodeFilter | null
-  firstChild: () => Node | null
-  lastChild: () => Node | null
-  nextNode: () => Node | null
-  previousNode: () => Node | null
-  root: Node
-  whatToShow: number
-}

/@react-aria/utils:getActiveElement

-getActiveElement {
-  doc: Document
-  returnVal: undefined
-}

/@react-aria/utils:getEventTarget

-getEventTarget {
-  event: any
-  returnVal: undefined
-}

/@react-aria/utils:nodeContains

-nodeContains {
-  node: Node | null | undefined
-  otherNode: Node | null | undefined
-  returnVal: undefined
-}

/@react-aria/utils:isShadowRoot

-isShadowRoot {
-  node: Node | null
-  returnVal: undefined
-}

@react-spectrum/s2

/@react-spectrum/s2:Breadcrumbs

 Breadcrumbs <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   onAction?: (Key) => void
   size?: 'M' | 'L' = 'M'
   styles?: StylesProp
 }

/@react-spectrum/s2:CardView

 CardView <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:ComboBoxSection

 ComboBoxSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:MenuSection

 MenuSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/@react-spectrum/s2:PickerSection

 PickerSection <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:TableHeader

 TableHeader <T extends {}> {
   children?: ReactNode | (T) => ReactElement
-  columns?: Iterable<T>
+  columns?: Array<T>
 }

/@react-spectrum/s2:TabList

 TabList <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   styles?: StylesProp
 }

/@react-spectrum/s2:TreeView

 TreeView {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:Collection

 Collection <T extends {}> {
   addIdAndValue?: boolean
   children?: ReactNode | ({}) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   idScope?: Key
   items?: Iterable<{}>
 }

/@react-spectrum/s2:BreadcrumbsProps

 BreadcrumbsProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: string
   isDisabled?: boolean
   onAction?: (Key) => void
   size?: 'M' | 'L' = 'M'
   styles?: StylesProp
 }

/@react-spectrum/s2:CardViewProps

 CardViewProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:ComboBoxSectionProps

 ComboBoxSectionProps <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:MenuSectionProps

 MenuSectionProps <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
   items?: Iterable<{}>
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
   value?: {}
 }

/@react-spectrum/s2:PickerSectionProps

 PickerSectionProps <T extends {}> {
   aria-label?: string
   children?: ReactNode | ({}) => ReactElement
   className?: string
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   id?: Key
   items?: Iterable<{}>
   style?: CSSProperties
   value?: {}

/@react-spectrum/s2:TableHeaderProps

 TableHeaderProps <T> {
   children?: ReactNode | (T) => ReactElement
-  columns?: Iterable<T>
+  columns?: Array<T>
 }

/@react-spectrum/s2:TabListProps

 TabListProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   children?: ReactNode | (T) => ReactNode
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   items?: Iterable<T>
   styles?: StylesProp
 }

/@react-spectrum/s2:TreeViewProps

 TreeViewProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
-  dependencies?: ReadonlyArray<any>
+  dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   expandedKeys?: Iterable<Key>
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   styles?: StylesPropWithHeight
 }

@react-stately/flags

/@react-stately/flags:enableShadowDOM

-enableShadowDOM {
-  returnVal: undefined
-}

/@react-stately/flags:shadowDOM

-shadowDOM {
-  returnVal: undefined
-}

@react-stately/toast

/@react-stately/toast:ToastQueue

 ToastQueue <T> {
   add: (T, ToastOptions) => void
   close: (string) => void
   constructor: (ToastStateProps) => void
   pauseAll: () => void
+  remove: (string) => void
   resumeAll: () => void
   subscribe: (() => void) => void
   visibleToasts: Array<QueuedToast<T>>
 }

/@react-stately/toast:ToastState

 ToastState <T> {
   add: (T, ToastOptions) => string
   close: (string) => void
   pauseAll: () => void
+  remove: (string) => void
   resumeAll: () => void
   visibleToasts: Array<QueuedToast<T>>
 }

/@react-stately/toast:QueuedToast

 QueuedToast <T> {
+  animation?: 'entering' | 'queued' | 'exiting' | null
   content: T
   key: string
   onClose?: () => void
   priority?: number
   timer?: Timer
 }

/@react-stately/toast:ToastStateProps

 ToastStateProps {
+  hasExitAnimation?: boolean
   maxVisibleToasts?: number
-  wrapUpdate?: (() => R) => R
 }

snowystinger added 3 commits February 5, 2025 15:15

fix: Autocomplete 'tab' key forwarding

e1ed6fe

fix react 16 compatibility

d754eaf

make better story name

0e943c3

devongovett reviewed Feb 5, 2025

View reviewed changes

packages/@react-aria/autocomplete/src/useAutocomplete.ts Outdated Show resolved Hide resolved

use daniel's fix

b73d35d

devongovett previously approved these changes Feb 7, 2025

View reviewed changes

amitdahan mentioned this pull request Feb 9, 2025

RAC: Autocomplete in Popover focus issues #7619

Closed

yihuiliao reviewed Feb 10, 2025

View reviewed changes

packages/react-aria-components/test/Autocomplete.test.tsx Outdated Show resolved Hide resolved

Update packages/react-aria-components/test/Autocomplete.test.tsx

4d5eaec

snowystinger dismissed devongovett’s stale review via 4d5eaec February 10, 2025 20:59

devongovett approved these changes Feb 10, 2025

View reviewed changes

yihuiliao approved these changes Feb 10, 2025

View reviewed changes

snowystinger added this pull request to the merge queue Feb 10, 2025

Merged via the queue into main with commit 4b8b33a Feb 10, 2025
30 checks passed

snowystinger deleted the fix-autocomplete-focus-management branch February 10, 2025 23:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Autocomplete 'tab' key forwarding #7724

fix: Autocomplete 'tab' key forwarding #7724

snowystinger commented Feb 5, 2025

rspbot commented Feb 5, 2025

rspbot commented Feb 5, 2025

rspbot commented Feb 7, 2025

devongovett left a comment

rspbot commented Feb 10, 2025

rspbot commented Feb 10, 2025

fix: Autocomplete 'tab' key forwarding #7724

fix: Autocomplete 'tab' key forwarding #7724

Conversation

snowystinger commented Feb 5, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Feb 5, 2025

rspbot commented Feb 5, 2025

rspbot commented Feb 7, 2025

devongovett left a comment

Choose a reason for hiding this comment

rspbot commented Feb 10, 2025

rspbot commented Feb 10, 2025

react-aria-components

/react-aria-components:Breadcrumbs

/react-aria-components:GridList

/react-aria-components:Section

/react-aria-components:Collection

/react-aria-components:ListBox

/react-aria-components:ListBoxSection

/react-aria-components:Menu

/react-aria-components:MenuSection

/react-aria-components:Row

/react-aria-components:TableHeader

/react-aria-components:TableBody

/react-aria-components:TabList

/react-aria-components:TagList

/react-aria-components:UNSTABLE_Tree

/react-aria-components:BreadcrumbsProps

/react-aria-components:GridListProps

/react-aria-components:SectionProps

/react-aria-components:ListBoxProps

/react-aria-components:ListBoxSectionProps

/react-aria-components:MenuProps

/react-aria-components:MenuSectionProps

/react-aria-components:TableHeaderProps

/react-aria-components:TableBodyProps

/react-aria-components:RowProps

/react-aria-components:TabListProps

/react-aria-components:TagListProps

/react-aria-components:TreeProps

@react-aria/collections

/@react-aria/collections:Collection

/@react-aria/collections:CollectionProps

/@react-aria/collections:CachedChildrenOptions

@react-aria/dnd

/@react-aria/dnd:ClipboardProps

@react-aria/utils

/@react-aria/utils:createShadowTreeWalker

/@react-aria/utils:ShadowTreeWalker

/@react-aria/utils:getActiveElement

/@react-aria/utils:getEventTarget

/@react-aria/utils:nodeContains

/@react-aria/utils:isShadowRoot

@react-spectrum/s2

/@react-spectrum/s2:Breadcrumbs

/@react-spectrum/s2:CardView

/@react-spectrum/s2:ComboBoxSection

/@react-spectrum/s2:MenuSection

/@react-spectrum/s2:PickerSection

/@react-spectrum/s2:TableHeader

/@react-spectrum/s2:TabList

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:Collection

/@react-spectrum/s2:BreadcrumbsProps

/@react-spectrum/s2:CardViewProps

/@react-spectrum/s2:ComboBoxSectionProps

/@react-spectrum/s2:MenuSectionProps

/@react-spectrum/s2:PickerSectionProps

/@react-spectrum/s2:TableHeaderProps

/@react-spectrum/s2:TabListProps

/@react-spectrum/s2:TreeViewProps

@react-stately/flags

/@react-stately/flags:enableShadowDOM

/@react-stately/flags:shadowDOM

@react-stately/toast

/@react-stately/toast:ToastQueue

/@react-stately/toast:ToastState

/@react-stately/toast:QueuedToast