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

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

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)

EDIT: I also just realized I somehow thought the default for disableVirtualFocus would be true lol, will make the change

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?

that's an excellent question, does seem problematic

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

Could use EventTarget? if it's just for dispatching events? or something else that they both inherit from?

figured something out with @devongovett's help

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

Sure, the one for collections is, but this input one does seem very tied to autocomplete

That or I'd argue both context should be defined somewhere else, that isn't inside the Autocomplete package

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

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

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

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-12T21:29:41Z

Build successful! 🎉

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

devongovett · 2025-08-15T18:03:08Z

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

@@ -282,6 +290,9 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
          }
          break;
      }
+    } else {
+      // TODO: check if we can do this, want to stop textArea from using its default Enter behavior so items are properly triggered


it seems to work, but I'm realizing with the grid virtual focus work that there are a ton of configurations to test haha

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

devongovett · 2025-08-15T18:15:23Z

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

@@ -106,7 +106,9 @@ interface GridListInnerProps<T extends object> {
 function GridListInner<T extends object>({props, collection, gridListRef: ref}: GridListInnerProps<T>) {
  // TODO: for now, don't grab collection ref and collectionProps from the autocomplete, rely on the user tabbing to the gridlist
  // figure out if we want to support virtual focus for grids when wrapped in an autocomplete
-  let {filter, collectionProps} = useContext(UNSTABLE_InternalAutocompleteContext) || {};
+  let contextProps;
+  [contextProps] = useContextProps({}, null, CollectionContext);


Should it consume the ref?

For now no since that would hook it up to the Autocomplete for virtual focus which isn't working in this PR and probably won't be ready for release, thus I don't want people to inadvertently wrap their GridList in a Autocomplete and not realize that they have to turn off virtual focus.

In #8728, I've hooked it up

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

…ne from subclass

…um into autocomplete_context_refactor

rspbot · 2025-08-15T22:14:28Z

Build successful! 🎉

rspbot · 2025-08-15T22:17:59Z

Build successful! 🎉

rspbot · 2025-08-16T00:13:26Z

Build successful! 🎉

rspbot · 2025-08-16T00:13:28Z

## API Changes

react-aria-components

/react-aria-components:Autocomplete

-Autocomplete {
+Autocomplete <T extends {}> {
   children: ReactNode
   defaultInputValue?: string
   disableAutoFocusFirst?: boolean = false
-  filter?: (string, string) => boolean
+  disableVirtualFocus?: boolean = false
+  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
+  disableVirtualFocus?: boolean = false
+  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

@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
+  disableVirtualFocus?: boolean = false
+  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
+  disableVirtualFocus?: boolean = false
+  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
+  constructor: (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: (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/collections:LoaderNode

+LoaderNode {
+  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>) => 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: any
+  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-aria/utils

/@react-aria/utils:UNSTABLE_useLoadMoreSentinel

-UNSTABLE_useLoadMoreSentinel {
-  props: LoadMoreSentinelProps
-  ref: RefObject<HTMLElement | null>
-  returnVal: undefined
-}

/@react-aria/utils:useLoadMoreSentinel

+useLoadMoreSentinel {
+  props: LoadMoreSentinelProps
+  ref: RefObject<HTMLElement | null>
+  returnVal: undefined
+}

@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
+  disableVirtualFocus?: boolean = false
+  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
+  disableVirtualFocus?: boolean = false
+  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

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

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

clear autocomplete contexts so that they dont leak to nested collections

82cb364

LFDanLu added the release label Aug 12, 2025

add tests for disallowVirtualFocus works with listbox and menu

18d3dbc

LFDanLu changed the title ~~fix: (WIP) Autocomplete context refactor~~ fix: Autocomplete context refactor Aug 13, 2025

LFDanLu marked this pull request as ready for review August 14, 2025 16:36

devongovett reviewed Aug 15, 2025

View reviewed changes

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

devongovett reviewed Aug 15, 2025

View reviewed changes

fix types

7cbf8a1

LFDanLu added 3 commits August 15, 2025 14:39

refactor CollectionNode to read from static property and properly clo…

8bfe6d2

…ne from subclass

naming from reviews and moving contexts out of autocomplete

5a72a98

Merge branch 'baseCollection_filter' of github.com:adobe/react-spectr…

05aca0b

…um into autocomplete_context_refactor

LFDanLu mentioned this pull request Aug 15, 2025

feat: (React Aria) Implement filtering on a per CollectionNode basis #8641

Open

5 tasks

review comments

6cfdb09

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

fix: Autocomplete context refactor #8695

Are you sure you want to change the base?

fix: 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!

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!

LFDanLu Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Aug 12, 2025

Uh oh!

rspbot commented Aug 12, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rspbot commented Aug 15, 2025

Uh oh!

rspbot commented Aug 15, 2025

Uh oh!

rspbot commented Aug 16, 2025

Uh oh!

rspbot commented Aug 16, 2025

react-aria-components

/react-aria-components:Autocomplete

/react-aria-components:UNSTABLE_createLeafComponent

/react-aria-components:UNSTABLE_createBranchComponent

/react-aria-components:Popover

LFDanLu Aug 12, 2025 •

edited

Loading