feat: Automatically detect if wrapped Autocomplete collection supports virtual focus #8862

LFDanLu · 2025-09-12T23:49:20Z

Also attempts to replace Dialog in S2 Popover so users trying to recreate a Combobox/Autocomplete like experience can simply use Popover

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

Autocomplete behavior should largely be the same as it already is on main, simply sanity check that aria-activedescendant only appears when the wrapped collection support virtual focus. For S2 components that used to use Popover (ComboBox, ContextualHelp, DatePicker, Menu, Picker, TabsPicker) check that their styling and behavior haven't changed with the refactor.

🧢 Your Project:

RSP

…rable collection and if said collection supports virtual focus

LFDanLu · 2025-09-12T23:50:05Z

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

  // moving focus back to the subtriggers
  let isMobileScreenReader = getInteractionModality() === 'virtual' && (isIOS() || isAndroid());
-  let shouldUseVirtualFocus = !isMobileScreenReader && !disableVirtualFocus;
+  let [shouldUseVirtualFocus, setShouldUseVirtualFocus] = useState(!isMobileScreenReader && !disableVirtualFocus);


We still want to keep disableVirtualFocus as a prop so a user can opt out of the virtual focus behavior based on their use case

LFDanLu · 2025-09-12T23:52:45Z

packages/@react-spectrum/s2/src/ComboBox.tsx

+            // TODO: Unfortunately can't override via styles prop
+            // need to unset the overflow otherwise we get two scroll bars
+            padding: 0,
+            overflow: 'unset'


A bit of gross, but needed if we want to completely migrate away from PopoverBase and replace it with Popover now that it directly uses the dialog rendered by RAC Popover. Also a bit annoying that we need to remember to override these...

LFDanLu · 2025-09-12T23:54:14Z

packages/@react-spectrum/s2/src/ContextualHelp.tsx

+        // TODO: Unfortunately, we can't pass these styles via the styles prop
+        // since we don't want to actually allow modifying width and padding for the popover...


Since Popover shouldn't freely allow a user to modify its width and padding, there isn't a great way to go about setting those overrides for components using PopoverBase like ContextualHelp...

LFDanLu · 2025-09-12T23:58:10Z

packages/@react-spectrum/s2/src/Popover.tsx

For context, the Popover used to render a Dialog for the user, but this meant Dialog specific behavior like auto focusing the Dialog would make it impossible for a user to use the S2 Popover for a custom Combobox. We've opted to instead rely on RAC Popover applying a "dialog" role instead since users don't have access to PopoverBase

LFDanLu · 2025-09-12T23:59:35Z

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

-  let contextProps;
-  [contextProps] = useContextProps({}, null, SelectableCollectionContext);
-  let {filter, ...collectionProps} = contextProps;
+  [props, ref] = useContextProps(props, ref, SelectableCollectionContext);


we now use the ref from useAutocomplete so the Autocomplete input knows it has been connected to a collection element it can filter

rspbot · 2025-09-16T18:32:26Z

Build successful! 🎉

…tocomplete_updates

rspbot · 2025-09-16T18:48:53Z

Build successful! 🎉

snowystinger · 2025-09-22T20:47:49Z

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

  });

+  let turnOffVirtualFocus = useCallback(() => {
+    setShouldUseVirtualFocus(false);


This probably needs to stopPropagation so that nested collections don't accidentally tell one farther up as well

rspbot · 2025-09-23T00:04:40Z

Build successful! 🎉

see https://github.com/adobe/react-spectrum/pull/7672/files

LFDanLu · 2025-09-23T00:30:42Z

packages/@react-spectrum/s2/src/Popover.tsx

+    // TODO: this moves the ref to the dialog, but the styles all go on the inner div since that is what needs overflow: auto to avoid hiding the popover arrow
+    // Kinda weird since we usually put everything on the top level element
+    // TODO: the combobox many items story is odd, it doesn't shift itself over to be properly aligned with the trigger like it does on main
+    <PopoverBase {...otherProps} ref={domRef}>
+      {composeRenderProps(props.children, (children) => (
+        <div
+          style={UNSAFE_style}
+          className={(UNSAFE_className || '') + mergeStyles(innerDivStyle, styles)}>
+          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}


ugh this isn't quite right either...

the TabsPicker want to sent a negative margin left to offset the popover's position (aka style provided via props wants to go to popover base NOT the inner div)

Popover wants the inner div to have the padding and overflow set so that it handles scrolling (aka these styles need to be on the inner div). Also needs the overflow set on inner div so the popover arrow isn't hidden

Combobox/components with listbox within their Popovers want the padding/overflow on the inner div to be unset since the ListBox already has padding/overflow handling out of the box (aka these styles need to go to the inner div)

rspbot · 2025-09-23T23:35:02Z

Build successful! 🎉

…g themselves...

rspbot · 2025-09-23T23:53:20Z

Build successful! 🎉

rspbot · 2025-09-23T23:53:22Z

## API Changes

react-aria-components

/react-aria-components:SelectionIndicator

-SelectionIndicator {
-  children?: ChildrenOrFunction<SharedElementRenderProps>
-  className?: ClassNameOrFunction<SharedElementRenderProps>
-  isSelected?: boolean
-  style?: StyleOrFunction<SharedElementRenderProps>
-}

/react-aria-components:SelectionIndicatorContext

-SelectionIndicatorContext {
-  UNTYPED
-}

/react-aria-components:SharedElementTransition

-SharedElementTransition {
-  children: ReactNode
-}

/react-aria-components:SharedElement

-SharedElement {
-  children?: ChildrenOrFunction<SharedElementRenderProps>
-  className?: ClassNameOrFunction<SharedElementRenderProps>
-  isVisible?: boolean
-  name: string
-  style?: StyleOrFunction<SharedElementRenderProps>
-}

/react-aria-components:SelectionIndicatorProps

-SelectionIndicatorProps {
-  children?: ChildrenOrFunction<SharedElementRenderProps>
-  className?: ClassNameOrFunction<SharedElementRenderProps>
-  isSelected?: boolean
-  style?: StyleOrFunction<SharedElementRenderProps>
-}

/react-aria-components:SharedElementTransitionProps

-SharedElementTransitionProps {
-  children: ReactNode
-}

/react-aria-components:SharedElementProps

-SharedElementProps {
-  children?: ChildrenOrFunction<SharedElementRenderProps>
-  className?: ClassNameOrFunction<SharedElementRenderProps>
-  isVisible?: boolean
-  name: string
-  style?: StyleOrFunction<SharedElementRenderProps>
-}

/react-aria-components:SharedElementRenderProps

-SharedElementRenderProps {
-  isEntering: boolean
-  isExiting: boolean
-}

/react-aria-components:SelectableCollectionContext

+SelectableCollectionContext {
+  UNTYPED
+}

/react-aria-components:FieldInputContext

+FieldInputContext {
+  UNTYPED
+}

/react-aria-components:SelectableCollectionContextValue

+SelectableCollectionContextValue <T> {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  disallowTypeAhead?: boolean
+  filter?: (string, Node<T>) => boolean
+  id?: string
+  shouldUseVirtualFocus?: boolean
+}

@react-aria/disclosure

/@react-aria/disclosure:useDisclosure

 useDisclosure {
   props: AriaDisclosureProps
   state: DisclosureState
-  ref: RefObject<HTMLElement | null>
+  ref: RefObject<Element | null>
   returnVal: undefined
 }

@react-aria/utils

/@react-aria/utils:willOpenKeyboard

-willOpenKeyboard {
-  target: Element
-  returnVal: undefined
-}

/@react-aria/utils:DISALLOW_VIRTUAL_FOCUS

+DISALLOW_VIRTUAL_FOCUS {
+  UNTYPED
+}

@react-spectrum/s2

/@react-spectrum/s2:Dialog

 Dialog {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isDismissible?: boolean
   isKeyboardDismissDisabled?: boolean
   role?: 'dialog' | 'alertdialog' = 'dialog'
-  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:Popover

 Popover {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children?: ReactNode | (DialogRenderProps) => ReactNode
+  children?: ChildrenOrFunction<PopoverRenderProps>
   containerPadding?: number = 12
   crossOffset?: number = 0
+  disableInnerDiv?: boolean
   hideArrow?: boolean = false
   id?: string
   isOpen?: boolean
   offset?: number = 8
   placement?: Placement = 'bottom'
   role?: 'dialog' | 'alertdialog' = 'dialog'
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L'
   slot?: string | null
   styles?: StylesProp
   triggerRef?: RefObject<Element | null>
 }

/@react-spectrum/s2:DialogProps

 DialogProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
   isDismissible?: boolean
   isKeyboardDismissDisabled?: boolean
   role?: 'dialog' | 'alertdialog' = 'dialog'
-  size?: 'S' | 'M' | 'L' | 'XL' = 'M'
+  size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

LFDanLu · 2025-09-24T00:12:16Z

packages/@react-spectrum/s2/src/Popover.tsx

-
+  let {
+    children,
+    disableInnerDiv,


super gross, maybe we just export PopoverBase as something like CustomPopover to mirror CustomDialog

LFDanLu added 3 commits September 9, 2025 10:13

exporting contexts for quarry

7bd802a

refactor autocomplete hook so it detects if it is attached to a filte…

2fc340b

…rable collection and if said collection supports virtual focus

initial attempt to get rid of Dialog from S2 Popover

f2cfed8

LFDanLu commented Sep 12, 2025

View reviewed changes

fix tests

8c7ece4

LFDanLu marked this pull request as ready for review September 16, 2025 18:29

Merge branch 'main' of github.com:adobe/react-spectrum into quarry_au…

f762894

…tocomplete_updates

LFDanLu added the ready for review label Sep 19, 2025

snowystinger reviewed Sep 22, 2025

View reviewed changes

add inner div with overflow so that popover arrow shows up

b877235

fix items overflowing when partially scrolled into view

9a08cae

see https://github.com/adobe/react-spectrum/pull/7672/files

LFDanLu commented Sep 23, 2025

View reviewed changes

LFDanLu added the release label Sep 23, 2025

conditionally render inner div for components that will handle paddin…

b667d5b

…g themselves...

LFDanLu commented Sep 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Automatically detect if wrapped Autocomplete collection supports virtual focus #8862

feat: Automatically detect if wrapped Autocomplete collection supports virtual focus #8862

LFDanLu commented Sep 12, 2025 •

edited

Loading

Uh oh!

LFDanLu Sep 12, 2025

Uh oh!

LFDanLu Sep 12, 2025 •

edited

Loading

Uh oh!

LFDanLu Sep 12, 2025

Uh oh!

LFDanLu Sep 12, 2025

Uh oh!

LFDanLu Sep 12, 2025

Uh oh!

rspbot commented Sep 16, 2025

Uh oh!

rspbot commented Sep 16, 2025

Uh oh!

snowystinger Sep 22, 2025

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

LFDanLu Sep 23, 2025

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

LFDanLu Sep 24, 2025

Uh oh!

Uh oh!

		// TODO: Unfortunately, we can't pass these styles via the styles prop
		// since we don't want to actually allow modifying width and padding for the popover...

feat: Automatically detect if wrapped Autocomplete collection supports virtual focus #8862

Are you sure you want to change the base?

feat: Automatically detect if wrapped Autocomplete collection supports virtual focus #8862

Conversation

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

Uh oh!

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

LFDanLu Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu Sep 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!

LFDanLu Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 16, 2025

Uh oh!

rspbot commented Sep 16, 2025

Uh oh!

snowystinger Sep 22, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

LFDanLu Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

rspbot commented Sep 23, 2025

react-aria-components

/react-aria-components:SelectionIndicator

/react-aria-components:SelectionIndicatorContext

/react-aria-components:SharedElementTransition

/react-aria-components:SharedElement

/react-aria-components:SelectionIndicatorProps

/react-aria-components:SharedElementTransitionProps

/react-aria-components:SharedElementProps

/react-aria-components:SharedElementRenderProps

/react-aria-components:SelectableCollectionContext

/react-aria-components:FieldInputContext

/react-aria-components:SelectableCollectionContextValue

@react-aria/disclosure

/@react-aria/disclosure:useDisclosure

@react-aria/utils

/@react-aria/utils:willOpenKeyboard

/@react-aria/utils:DISALLOW_VIRTUAL_FOCUS

@react-spectrum/s2

/@react-spectrum/s2:Dialog

/@react-spectrum/s2:Popover

/@react-spectrum/s2:DialogProps

Uh oh!

LFDanLu Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

LFDanLu commented Sep 12, 2025 •

edited

Loading

LFDanLu Sep 12, 2025 •

edited

Loading