fix: (WIP) Autocomplete context refactor #8695

LFDanLu · 2025-08-08T21:57:17Z

Closes

✅ 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:

…context in autocomplete

rspbot · 2025-08-08T22:06:32Z

Build successful! 🎉

rspbot · 2025-08-08T22:06:38Z

Build successful! 🎉

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

LFDanLu · 2025-08-11T23:04:46Z

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

+// TODO export from RAC, maybe move up and out of Autocomplete
+// also can't make this use ContextValue (so that we can call useContextProps) like FieldInput for a similar reason. The HTMLElement type for the ref
+// makes useContextProps complain since it doesn't mesh up with HTMLDivElement
+export const CollectionContext = createContext<CollectionContextValue<any> | null>(null);
+// TODO: too restrictive to type this as a HTMLInputElement? Needed for the ref merging that happens in TextField/SearchField
+// Attempted to use FocusableElement but as mentioned above, SearchField and TextField complain since they expect HTMLInputElement for their hooks and stuff
+export const FieldInputContext = createContext<ContextValue<FieldInputContextValue, HTMLInputElement>>(null);


Types are the final problem here. The problem is two fold, ideally we'd be able to have CollectionContext use the ContextValue type so that we can merge the refs via useContextProps, but the collection element that will use that merged ref complain because HTMLElement doesn't overlap sufficiently with HTMLDivElement/etc.

For FieldInputContext, we'd ideally use a more general type than HTMLInputElement, but ContextValue doesn't take a generic and FocusableElement doesn't mesh with SearchField's HTMLInputElement ref type

rspbot · 2025-08-11T23:06:46Z

Build successful! 🎉

rspbot · 2025-08-11T23:53:55Z

Build successful! 🎉

snowystinger · 2025-08-11T23:59:47Z

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

+  /**
+   * Whether the autocomplete should disable virtual focus, instead making the wrapped collection directly tabbable.
+   */
+  disallowVirtualFocus?: boolean


disableVirtualFocus i think is a better name, it's not really about allowing or not, it's just whether it is or not

I debated about this myself a bit haha. I went with the above since it means the default is false as per our API guidelines, but I certainly do like disable better (as can be seen from disableAutoFocusFirst)

another thing to discuss perhaps: is it a problem that virtual focus doesn't work with grid collection just yet but will be enabled by default later?

snowystinger · 2025-08-12T00:23:22Z

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

+// TODO export from RAC, maybe move up and out of Autocomplete
+// also can't make this use ContextValue (so that we can call useContextProps) like FieldInput for a similar reason. The HTMLElement type for the ref
+// makes useContextProps complain since it doesn't mesh up with HTMLDivElement


yes, move up
what is the ts error? Maybe we can fix it. though is useContextProps the correct thing to use anyways? Would we ever expect these to be passed as actual props? or only through the context?

the error is as follows:
ideally we define the CollectionContext like so

export const CollectionContext = createContext<ContextValue<CollectionContextValue<any>, HTMLElement>>(null);

so that a consuming component like Menu can then call useContextProps like

[collectionProps, ref] = useContextProps(collectionProps, ref, CollectionContext);

in order to merge its own set of collectionProps and its own ref with the ones being provided by the Autocomplete via context. However, the ref type in Menu might be something like RefObject<HTMLDivElement | null> vs the CollectionContext's RefObject<HTMLElement | null> which then conflicts and typescript complains. The context's ref just needs to be something that we can dispatch events on and thus should be as generic as possible, but ContextValue doesn't take a generic it seems...

it isn't necessary to use useContextProps, hence the current approach working in Menu/Listbox working due to casting the final ref merge as the desired ref type, but it would be nice to have that work IMO

Updated with another attempt at the types

snowystinger · 2025-08-12T00:24:10Z

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

 }

+// TODO: naming
+interface FieldInputContextValue<T = HTMLInputElement> extends


Suggested change

interface FieldInputContextValue<T = HTMLInputElement> extends

interface AutocompleteInputContextValue<T = HTMLInputElement> extends

this seems more reasonable, this is specific to the Autocomplete, whereas the CollectionContext is specific to the Collections. Unless we had something in mind for this context that wasn't Autocomplete?

From my understanding, the eventual intent for these contexts is that they aren't specifically tied to Autocomplete and simply contain values/attributes/properties that a input might have. It may not even be an input though, could be a text area or some other control hence the generic default.

The future use case is still a bit hazy though tbh

snowystinger · 2025-08-12T00:26:24Z

packages/react-aria-components/src/ListBox.tsx

@@ -120,7 +120,7 @@ interface ListBoxInnerProps<T> {
 }

 function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}: ListBoxInnerProps<T>) {
-  let {filter, collectionProps, collectionRef} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let {filter, collectionRef, ...collectionProps} = useContext(CollectionContext) || {};


are we still using UNSTABLE_useFilteredListState as the name for this? or should these also be updated out of UNSTABLE?

not actually attached to this line, but it's nearby

good question, I think I'm going to lean towards keeping these UNSTABLE for now since it is used in GridList who's Autocomplete virtual behavior isn't completely ironed out yet (I don't think there will be any changes there but just for safety).

snowystinger · 2025-08-12T00:27:47Z

packages/react-aria-components/src/Menu.tsx

@@ -251,7 +251,7 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
            [SectionContext, {name: 'MenuSection', render: MenuSectionInner}],
            [SubmenuTriggerContext, {parentMenuRef: ref, shouldUseVirtualFocus: autocompleteMenuProps?.shouldUseVirtualFocus}],
            [MenuItemContext, null],
-            [UNSTABLE_InternalAutocompleteContext, null],
+            [CollectionContext, null],


should ListBox and GridList also clear this now that we support nested grids? ex TagGroup inside Cell?

I think we should also clear the new input context

I don't think ListBox needs to since it doesn't support nested collections or interactive elements in its options, but GridList/TableView is a good call. I'll also clear the input context as well

snowystinger · 2025-08-12T00:38:26Z

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

@@ -126,7 +127,7 @@ function AutocompleteWrapper(props) {
 export const AutocompleteExample: AutocompleteStory = {
  render: (args) => {
    return (
-      <AutocompleteWrapper>
+      <AutocompleteWrapper disallowVirtualFocus={args.disallowVirtualFocus}>


should we open all the args? and just spread args on?

eh, I'd rather pass just what the autocomplete will use

LFDanLu · 2025-08-12T18:32:07Z

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

@@ -52,7 +57,7 @@ export interface AriaAutocompleteOptions<T> extends Omit<AriaAutocompleteProps<T

 export interface AutocompleteAria<T> {
  /** Props for the autocomplete textfield/searchfield element. These should be passed to the textfield/searchfield aria hooks respectively. */
-  textFieldProps: AriaTextFieldProps,
+  textFieldProps: AriaTextFieldProps<FocusableElement>,


maybe more appropriate to make these types more broad

rspbot · 2025-08-12T18:39:18Z

Build successful! 🎉

rspbot · 2025-08-12T18:39:20Z

## API Changes

react-aria-components

/react-aria-components:Autocomplete

-Autocomplete {
+Autocomplete <T extends {}> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
-  filter?: (string, string) => boolean
+  disallowVirtualFocus?: boolean
+  filter?: (string, string, Node<{}>) => boolean
   inputValue?: string
   onInputChange?: (string) => void
   slot?: string | null
 }

/react-aria-components:UNSTABLE_createLeafComponent

 UNSTABLE_createLeafComponent <E extends Element, P extends {}> {
-  type: string
+  CollectionNodeClass: {}<any> | string
   render: (P, ForwardedRef<E>, any) => ReactElement | null
   returnVal: undefined
 }

/react-aria-components:UNSTABLE_createBranchComponent

 UNSTABLE_createBranchComponent <E extends Element, P extends {
     children?: any
 }, T extends {}> {
-  type: string
+  CollectionNodeClass: {}<any> | string
   render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
   useChildren: (P) => ReactNode
   returnVal: undefined
 }

/react-aria-components:Popover

 Popover {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   arrowBoundaryOffset?: number = 0
-  arrowRef?: RefObject<Element | null>
   boundaryElement?: Element = document.body
   children?: ChildrenOrFunction<PopoverRenderProps>
   className?: ClassNameOrFunction<PopoverRenderProps>
   containerPadding?: number = 12
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: StyleOrFunction<PopoverRenderProps>
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:VisuallyHidden

-VisuallyHidden {
-  children?: ReactNode
-  className?: string | undefined
-  elementType?: string | JSXElementConstructor<any> = 'div'
-  id?: string | undefined
-  isFocusable?: boolean
-  role?: AriaRole | undefined
-  style?: CSSProperties | undefined
-  tabIndex?: number | undefined
-}

/react-aria-components:AutocompleteProps

-AutocompleteProps {
+AutocompleteProps <T> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
-  filter?: (string, string) => boolean
+  disallowVirtualFocus?: boolean
+  filter?: (string, string, Node<T>) => boolean
   inputValue?: string
   onInputChange?: (string) => void
   slot?: string | null
 }

/react-aria-components:PopoverProps

 PopoverProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   arrowBoundaryOffset?: number = 0
-  arrowRef?: RefObject<Element | null>
   boundaryElement?: Element = document.body
   children?: ChildrenOrFunction<PopoverRenderProps>
   className?: ClassNameOrFunction<PopoverRenderProps>
   containerPadding?: number = 12
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: StyleOrFunction<PopoverRenderProps>
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:GridLayoutOptions

 GridLayoutOptions {
   dropIndicatorThickness?: number = 2
   maxColumns?: number = Infinity
-  maxHorizontalSpace?: number = Infinity
   maxItemSize?: Size = Infinity
   minItemSize?: Size = 200 x 200
   minSpace?: Size = 18 x 18
   preserveAspectRatio?: boolean = false

/react-aria-components:SeparatorNode

+SeparatorNode {
+  aria-label?: string
+  childNodes: Iterable<Node<T>>
+  clone: () => CollectionNode<T>
+  colIndex: number | null
+  colSpan: number | null
+  constructor: (Key) => void
+  filter: (BaseCollection<any>, BaseCollection<any>) => CollectionNode<any> | null
+  firstChildKey: Key | null
+  hasChildNodes: boolean
+  index: number
+  key: Key
+  lastChildKey: Key | null
+  level: number
+  nextKey: Key | null
+  parentKey: Key | null
+  prevKey: Key | null
+  props: any
+  render?: (Node<any>) => ReactElement
+  rendered: ReactNode
+  textValue: string
+  type: any
+  value: T | null
+}

@internationalized/date

/@internationalized/date:setLocalTimeZone

-setLocalTimeZone {
-  timeZone: string
-  returnVal: undefined
-}

/@internationalized/date:resetLocalTimeZone

-resetLocalTimeZone {
-  returnVal: undefined
-}

@react-aria/autocomplete

/@react-aria/autocomplete:useAutocomplete

-useAutocomplete {
+useAutocomplete <T> {
-  props: AriaAutocompleteOptions
+  props: AriaAutocompleteOptions<T>
   state: AutocompleteState
   returnVal: undefined
 }

/@react-aria/autocomplete:AriaAutocompleteProps

-AriaAutocompleteProps {
+AriaAutocompleteProps <T> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
-  filter?: (string, string) => boolean
+  disallowVirtualFocus?: boolean
+  filter?: (string, string, Node<T>) => boolean
   inputValue?: string
   onInputChange?: (string) => void
 }

/@react-aria/autocomplete:AriaAutocompleteOptions

-AriaAutocompleteOptions {
+AriaAutocompleteOptions <T> {
   collectionRef: RefObject<HTMLElement | null>
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
-  filter?: (string, string) => boolean
+  disallowVirtualFocus?: boolean
+  filter?: (string, string, Node<T>) => boolean
   inputRef: RefObject<HTMLInputElement | null>
   inputValue?: string
   onInputChange?: (string) => void
 }

/@react-aria/autocomplete:AutocompleteAria

-AutocompleteAria {
+AutocompleteAria <T> {
   collectionProps: CollectionOptions
   collectionRef: RefObject<HTMLElement | null>
-  filter?: (string) => boolean
-  textFieldProps: AriaTextFieldProps
+  filter?: (string, Node<T>) => boolean
+  textFieldProps: AriaTextFieldProps<FocusableElement>
 }

@react-aria/collections

/@react-aria/collections:createLeafComponent

 createLeafComponent <E extends Element, P extends {}> {
-  type: string
+  CollectionNodeClass: {}<any> | string
   render: (P, ForwardedRef<E>, any) => ReactElement | null
   returnVal: undefined
 }

/@react-aria/collections:createBranchComponent

 createBranchComponent <E extends Element, P extends {
     children?: any
 }, T extends {}> {
-  type: string
+  CollectionNodeClass: {}<any> | string
   render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
   useChildren: (P) => ReactNode
   returnVal: undefined
 }

/@react-aria/collections:BaseCollection

 BaseCollection <T> {
-  UNSTABLE_filter: ((string) => boolean) => BaseCollection<T>
   addNode: (CollectionNode<T>) => void
   at: () => Node<T>
   clone: () => this
   commit: (Key | null, Key | null, any) => void
+  filter: (FilterFn<T>, BaseCollection<T>) => BaseCollection<T>
   getChildren: (Key) => Iterable<Node<T>>
   getFirstKey: () => Key | null
   getItem: (Key) => Node<T> | null
   getKeyAfter: (Key) => Key | null
   getKeys: () => IterableIterator<Key>
   getLastKey: () => Key | null
   removeNode: (Key) => void
   size: number
   undefined: () => IterableIterator<Node<T>>
 }

/@react-aria/collections:CollectionNode

 CollectionNode <T> {
   aria-label?: string
   childNodes: Iterable<Node<T>>
   clone: () => CollectionNode<T>
   colIndex: number | null
   colSpan: number | null
   constructor: (string, Key) => void
+  filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => CollectionNode<T> | null
   firstChildKey: Key | null
   hasChildNodes: boolean
   index: number
   key: Key
   level: number
   nextKey: Key | null
   parentKey: Key | null
   prevKey: Key | null
   props: any
   render?: (Node<any>) => ReactElement
   rendered: ReactNode
   textValue: string
   type: string
   value: T | null
 }

/@react-aria/collections:ItemNode

+ItemNode <T> {
+  aria-label?: string
+  childNodes: Iterable<Node<T>>
+  clone: () => CollectionNode<T>
+  colIndex: number | null
+  colSpan: number | null
+  constructor: (Key) => void
+  filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => ItemNode<T> | null
+  firstChildKey: Key | null
+  hasChildNodes: boolean
+  index: number
+  key: Key
+  lastChildKey: Key | null
+  level: number
+  nextKey: Key | null
+  parentKey: Key | null
+  prevKey: Key | null
+  props: any
+  render?: (Node<any>) => ReactElement
+  rendered: ReactNode
+  textValue: string
+  type: any
+  value: T | null
+}

/@react-aria/collections:SectionNode

+SectionNode <T> {
+  aria-label?: string
+  childNodes: Iterable<Node<T>>
+  clone: () => CollectionNode<T>
+  colIndex: number | null
+  colSpan: number | null
+  constructor: (Key) => void
+  filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => SectionNode<T> | null
+  firstChildKey: Key | null
+  hasChildNodes: boolean
+  index: number
+  key: Key
+  lastChildKey: Key | null
+  level: number
+  nextKey: Key | null
+  parentKey: Key | null
+  prevKey: Key | null
+  props: any
+  render?: (Node<any>) => ReactElement
+  rendered: ReactNode
+  textValue: string
+  type: any
+  value: T | null
+}

/@react-aria/collections:FilterLessNode

+FilterLessNode <T> {
+  aria-label?: string
+  childNodes: Iterable<Node<T>>
+  clone: () => CollectionNode<T>
+  colIndex: number | null
+  colSpan: number | null
+  constructor: (string, Key) => void
+  filter: (BaseCollection<T>, BaseCollection<T>, FilterFn<T>) => FilterLessNode<T> | null
+  firstChildKey: Key | null
+  hasChildNodes: boolean
+  index: number
+  key: Key
+  lastChildKey: Key | null
+  level: number
+  nextKey: Key | null
+  parentKey: Key | null
+  prevKey: Key | null
+  props: any
+  render?: (Node<any>) => ReactElement
+  rendered: ReactNode
+  textValue: string
+  type: string
+  value: T | null
+}

@react-aria/overlays

/@react-aria/overlays:AriaPositionProps

 AriaPositionProps {
   arrowBoundaryOffset?: number = 0
-  arrowRef?: RefObject<Element | null>
   arrowSize?: number = 0
   boundaryElement?: Element = document.body
   containerPadding?: number = 12
   crossOffset?: number = 0
   maxHeight?: number
   offset?: number = 0
   onClose?: () => void | null
   overlayRef: RefObject<Element | null>
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   targetRef: RefObject<Element | null>
 }

/@react-aria/overlays:PositionAria

 PositionAria {
   arrowProps: DOMAttributes
   overlayProps: DOMAttributes
   placement: PlacementAxis | null
-  triggerOrigin: {
-    x: number
-  y: number
-} | null
   updatePosition: () => void
 }

/@react-aria/overlays:AriaPopoverProps

 AriaPopoverProps {
   arrowBoundaryOffset?: number = 0
-  arrowRef?: RefObject<Element | null>
   arrowSize?: number = 0
   boundaryElement?: Element = document.body
   containerPadding?: number = 12
   crossOffset?: number = 0
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   maxHeight?: number
   offset?: number = 0
   placement?: Placement = 'bottom'
   popoverRef: RefObject<Element | null>
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   triggerRef: RefObject<Element | null>
 }

/@react-aria/overlays:PopoverAria

 PopoverAria {
   arrowProps: DOMAttributes
   placement: PlacementAxis | null
   popoverProps: DOMAttributes
-  triggerOrigin: {
-    x: number
-  y: number
-} | null
   underlayProps: DOMAttributes
 }

@react-spectrum/overlays

/@react-spectrum/overlays:Popover

 Popover {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   arrowBoundaryOffset?: number = 0
-  arrowRef?: RefObject<Element | null>
   arrowSize?: number = 0
   bottom?: Responsive<DimensionValue>
   boundaryElement?: Element = document.body
   children: ReactNode
   containerPadding?: number = 12
   crossOffset?: number = 0
   disableFocusManagement?: boolean
   enableBothDismissButtons?: boolean
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   groupRef?: RefObject<Element | null>
   height?: Responsive<DimensionValue>
   hideArrow?: boolean
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   offset?: number = 0
   onBlurWithin?: (FocusEvent) => void
   onDismissButtonPress?: () => void
   onEnter?: () => void
   onEntered?: () => void
   onEntering?: () => void
   onExit?: () => void
   onExited?: () => void
   onExiting?: () => void
   onFocusWithin?: (FocusEvent) => void
   onFocusWithinChange?: (boolean) => void
   order?: Responsive<number>
   placement?: Placement = 'bottom'
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldContainFocus?: boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   start?: Responsive<DimensionValue>
   state: OverlayTriggerState
   top?: Responsive<DimensionValue>
   triggerRef: RefObject<Element | null>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:Autocomplete

-Autocomplete {
+Autocomplete <T extends {}> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
-  filter?: (string, string) => boolean
+  disallowVirtualFocus?: boolean
+  filter?: (string, string, Node<{}>) => boolean
   inputValue?: string
   onInputChange?: (string) => void
   slot?: string | null
 }

/@react-spectrum/s2:PopoverProps

 PopoverProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  arrowRef?: RefObject<Element | null>
   boundaryElement?: Element = document.body
   children?: ChildrenOrFunction<PopoverRenderProps>
   className?: ClassNameOrFunction<PopoverRenderProps>
   containerPadding?: number = 12
   defaultOpen?: boolean
   hideArrow?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L'
   slot?: string | null
   style?: StyleOrFunction<PopoverRenderProps>
   styles?: StyleString
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/@react-spectrum/s2:AutocompleteProps

-AutocompleteProps {
+AutocompleteProps <T> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
-  filter?: (string, string) => boolean
+  disallowVirtualFocus?: boolean
+  filter?: (string, string, Node<T>) => boolean
   inputValue?: string
   onInputChange?: (string) => void
   slot?: string | null
 }

@react-stately/data

/@react-stately/data:ListData

 ListData <T> {
-  addKeysToSelection: (Selection) => void
   append: (Array<T>) => void
   filterText: string
   getItem: (Key) => T | undefined
   insert: (number, Array<T>) => void
   insertAfter: (Key, Array<T>) => void
   insertBefore: (Key, Array<T>) => void
   items: Array<T>
   move: (Key, number) => void
   moveAfter: (Key, Iterable<Key>) => void
   moveBefore: (Key, Iterable<Key>) => void
   prepend: (Array<T>) => void
   remove: (Array<Key>) => void
-  removeKeysFromSelection: (Selection) => void
   removeSelectedItems: () => void
   selectedKeys: Selection
   setFilterText: (string) => void
   setSelectedKeys: (Selection) => void
 }

/@react-stately/data:AsyncListData

 AsyncListData <T> {
-  addKeysToSelection: (Selection) => void
   append: (Array<T>) => void
   error?: Error
   filterText: string
   getItem: (Key) => T | undefined
   insert: (number, Array<T>) => void
   insertAfter: (Key, Array<T>) => void
   insertBefore: (Key, Array<T>) => void
   isLoading: boolean
   items: Array<T>
   loadMore: () => void
   loadingState: LoadingState
   move: (Key, number) => void
   moveAfter: (Key, Iterable<Key>) => void
   moveBefore: (Key, Iterable<Key>) => void
   prepend: (Array<T>) => void
   reload: () => void
   remove: (Array<Key>) => void
-  removeKeysFromSelection: (Selection) => void
   removeSelectedItems: () => void
   selectedKeys: Selection
   setFilterText: (string) => void
   setSelectedKeys: (Selection) => void
   sortDescriptor?: SortDescriptor
   update: (Key, T) => void
 }

@react-stately/layout

/@react-stately/layout:GridLayoutOptions

 GridLayoutOptions {
   dropIndicatorThickness?: number = 2
   maxColumns?: number = Infinity
-  maxHorizontalSpace?: number = Infinity
   maxItemSize?: Size = Infinity
   minItemSize?: Size = 200 x 200
   minSpace?: Size = 18 x 18
   preserveAspectRatio?: boolean = false

@react-stately/list

/@react-stately/list:UNSTABLE_useFilteredListState

 UNSTABLE_useFilteredListState <T extends {}> {
   state: ListState<T>
-  filter: (string) => boolean | null | undefined
+  filterFn: (string, Node<T>) => boolean | null | undefined
   returnVal: undefined
 }

@react-stately/table

/@react-stately/table:UNSTABLE_useFilteredTableState

+UNSTABLE_useFilteredTableState <T extends {}> {
+  state: TableState<T>
+  filterFn: (string, Node<T>) => boolean | null | undefined
+  returnVal: undefined
+}

LFDanLu added 5 commits August 8, 2025 13:48

autoimport....

c111744

replace internal autocomplete context

24dd7cb

add FieldInputContext in place of input context and search/textfield …

d8969a7

…context in autocomplete

fix build

ae3cc84

removing erroneous autoimports

3a81f31

LFDanLu added 2 commits August 8, 2025 16:50

add ability for user to provide independent filter text

db91b3a

fix lint

7177106

LFDanLu commented Aug 9, 2025

View reviewed changes

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

LFDanLu added 2 commits August 11, 2025 10:52

fix some more tests

dfb80f3

bring back controlled input value at autocomplete level

ec8066f

LFDanLu commented Aug 11, 2025

View reviewed changes

adding prop to disable virtual focus

76107ff

snowystinger reviewed Aug 11, 2025

View reviewed changes

snowystinger reviewed Aug 12, 2025

View reviewed changes

another stab at the types

cde0977

LFDanLu commented Aug 12, 2025

View reviewed changes

LFDanLu added the release label Aug 12, 2025

	interface FieldInputContextValue<T = HTMLInputElement> extends
	interface AutocompleteInputContextValue<T = HTMLInputElement> extends

fix: (WIP) Autocomplete context refactor #8695

Are you sure you want to change the base?

fix: (WIP) Autocomplete context refactor #8695

Conversation

LFDanLu commented Aug 8, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Aug 8, 2025

Uh oh!

rspbot commented Aug 8, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 11, 2025

Uh oh!

rspbot commented Aug 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 12, 2025

Uh oh!

rspbot commented Aug 12, 2025

react-aria-components

/react-aria-components:Autocomplete

/react-aria-components:UNSTABLE_createLeafComponent

/react-aria-components:UNSTABLE_createBranchComponent

/react-aria-components:Popover

/react-aria-components:VisuallyHidden

/react-aria-components:AutocompleteProps

/react-aria-components:PopoverProps

/react-aria-components:GridLayoutOptions

/react-aria-components:SeparatorNode

@internationalized/date

/@internationalized/date:setLocalTimeZone

/@internationalized/date:resetLocalTimeZone

@react-aria/autocomplete

/@react-aria/autocomplete:useAutocomplete

/@react-aria/autocomplete:AriaAutocompleteProps

/@react-aria/autocomplete:AriaAutocompleteOptions

/@react-aria/autocomplete:AutocompleteAria

@react-aria/collections

/@react-aria/collections:createLeafComponent

/@react-aria/collections:createBranchComponent

/@react-aria/collections:BaseCollection

/@react-aria/collections:CollectionNode