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

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

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

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

I think this makes sense, I had it on my list of things to explore since the change in RAC came after we wrote a good chunk of S2 popover usage

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

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

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

Build successful! 🎉

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

Build successful! 🎉

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

rspbot · 2025-09-24T18:50:24Z

Build successful! 🎉

rspbot · 2025-09-24T20:59:16Z

Build successful! 🎉

LFDanLu · 2025-09-24T20:54:05Z

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

+            // Subtract by 2 since these widths are set on the inner div rather than on the outermost div element that has
+            // a border
+            width: menuWidth ? `calc(${menuWidth}px - 2 * var(--s2-container-border-width))` : undefined,
+            '--trigger-width': `calc(${triggerWidth} - 2 * var(--s2-container-border-width))`


unfortunate consequence of switching to Popover from PopoverBase

not sure i understand this comment

wish we didn't need to use UNSAFE style to declare variables that are arbitrary and the result of calculations

wonder if we should consider a new style prop just for variables, that should be safe

its because previously these width values would go to the outer div that had the border applied to it, but now that we use Popover these values go to the inner div since we need to modify that div's padding/overflow. I'd really like if there was just a single container div per say, but applying overflow: auto to the outer div will hide the popover arrow...

LFDanLu · 2025-09-24T20:57:10Z

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

+                // TODO: not sure how best to type styles so it also can accept arbitrary css vars
+                // @ts-ignore
                styles={style({
-                  marginStart: {
-                    isQuiet: -12
+                  '--cross-offset': {
+                    type: 'width',
+                    value: -12


Open to any suggestions on how best to type styles in Popover to accept arbitrary values for setting css variables, might be forgetting where we do this. From what I can tell, this pattern usually happens when setting className which accepts a style string

is this?

// TODO: not sure how best to type styles so it also can accept arbitrary css vars

you'd need to set it in UNSAFE_style, otherwise you need to specify every possible value and take it as an argument

yeah, but setting it in UNSAFE_style doesn't allow for the above syntax and thus we'd need to manually transform that value to rems (or for cases like borderOffsetWidth, the value is actually in px) essentially duplicating a bunch of the work done in the theme

LFDanLu · 2025-09-24T20:57:55Z

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

+type popoverOverrides = [
+  'overflow',
+  'padding',
+  'paddingStart',
+  'paddingEnd',
+  'paddingTop',
+  'paddingBottom',
+  'paddingX',
+  'paddingY',
+  'display',
+  'flexDirection',
+  'gap'
+];


new overrides that users can set on the Popover. These are set on the inner div

LFDanLu · 2025-09-24T21:00:52Z

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=1037

…tocomplete_updates

rspbot · 2025-09-24T21:13:04Z

Build successful! 🎉

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

snowystinger · 2025-09-24T21:31:05Z

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

+            // Subtract by 2 since these widths are set on the inner div rather than on the outermost div element that has
+            // a border
+            width: menuWidth ? `calc(${menuWidth}px - 2 * var(--s2-container-border-width))` : undefined,
+            '--trigger-width': `calc(${triggerWidth} - 2 * var(--s2-container-border-width))`


not sure i understand this comment

wish we didn't need to use UNSAFE style to declare variables that are arbitrary and the result of calculations

wonder if we should consider a new style prop just for variables, that should be safe

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

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

snowystinger · 2025-09-24T21:39:16Z

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

+                // TODO: not sure how best to type styles so it also can accept arbitrary css vars
+                // @ts-ignore
                styles={style({
-                  marginStart: {
-                    isQuiet: -12
+                  '--cross-offset': {
+                    type: 'width',
+                    value: -12


is this?

// TODO: not sure how best to type styles so it also can accept arbitrary css vars

you'd need to set it in UNSAFE_style, otherwise you need to specify every possible value and take it as an argument

snowystinger · 2025-09-24T21:40:36Z

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

I think this makes sense, I had it on my list of things to explore since the change in RAC came after we wrote a good chunk of S2 popover usage

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

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

rspbot · 2025-09-25T14:52:11Z

Build successful! 🎉

collection should only have a tab index if it isnt using virtual focus

turns out the border of the popover shouldnt be included in the total width calculation, it is considered outside of the popover so no need to adjust. The border will be removed in favor of a box shadow to conform with update designs later

rspbot · 2025-09-25T18:20:50Z

Build successful! 🎉

rspbot · 2025-09-25T18:28:11Z

Build successful! 🎉

as per discussion with team, if someone wants to modify their popover internals, they are expected to add a inner wrapping div themselves and turn off padding like custom dialog.

rspbot · 2025-09-25T23:47:53Z

Build successful! 🎉

rspbot · 2025-09-26T00:05:14Z

Build successful! 🎉

# Conflicts: # packages/@react-spectrum/s2/src/Popover.tsx

rspbot · 2025-09-26T00:49:27Z

Build successful! 🎉

rspbot · 2025-09-26T00:49:29Z

## API Changes

react-aria-components

/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-spectrum/s2

/@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
   hideArrow?: boolean = false
   id?: string
   isOpen?: boolean
   offset?: number = 8
   onOpenChange?: (boolean) => void
+  padding?: 'default' | 'none' = 'default'
   placement?: Placement = 'bottom'
   role?: 'dialog' | 'alertdialog' = 'dialog'
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L'
   slot?: string | null
-  styles?: StylesProp
+  styles?: PopoverStylesProp
   triggerRef?: RefObject<Element | null>
 }

/@react-spectrum/s2:ColorSchemeContext

+ColorSchemeContext {
+  UNTYPED
+}

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

packages/@react-spectrum/s2/src/ComboBox.tsx Outdated Show resolved Hide resolved

LFDanLu commented Sep 12, 2025

View reviewed changes

packages/@react-spectrum/s2/src/ContextualHelp.tsx Outdated Show resolved Hide resolved

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

packages/@react-spectrum/s2/src/Popover.tsx Outdated Show resolved Hide resolved

LFDanLu added the release label Sep 23, 2025

LFDanLu commented Sep 24, 2025

View reviewed changes

update Popover so it accepts more values in styles instead

6ad1bbc

LFDanLu force-pushed the quarry_autocomplete_updates branch from b667d5b to 6ad1bbc Compare September 24, 2025 18:21

LFDanLu added 3 commits September 24, 2025 11:29

fix lint

e939f60

export colorSchemeContext

65805c7

clean up extra comment

4bb28d4

fix chromatic

2c091b9

LFDanLu commented Sep 24, 2025

View reviewed changes

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

ecacbbe

…tocomplete_updates

snowystinger reviewed Sep 24, 2025

View reviewed changes

review comments

7ee23f3

LFDanLu commented Sep 24, 2025

View reviewed changes

packages/@react-spectrum/s2/src/ContextualHelp.tsx Outdated Show resolved Hide resolved

fix calc

74be69b

LFDanLu added 3 commits September 25, 2025 10:36

substitute custom event in favor of collection tabindex check

bc2cbd8

collection should only have a tab index if it isnt using virtual focus

update width calculations

9fc6987

turns out the border of the popover shouldnt be included in the total width calculation, it is considered outside of the popover so no need to adjust. The border will be removed in favor of a box shadow to conform with update designs later

forgot to remove commented out code

30c9e7e

move popover styling to user provided inner div

f9fc374

as per discussion with team, if someone wants to modify their popover internals, they are expected to add a inner wrapping div themselves and turn off padding like custom dialog.

forgot to bring back styles

5d04fe7

devongovett previously approved these changes Sep 26, 2025

View reviewed changes

Merge branch 'main' into quarry_autocomplete_updates

eef1cc9

# Conflicts: # packages/@react-spectrum/s2/src/Popover.tsx

snowystinger dismissed devongovett’s stale review via eef1cc9 September 26, 2025 00:40

snowystinger approved these changes Sep 26, 2025

View reviewed changes

devongovett approved these changes Sep 26, 2025

View reviewed changes

devongovett added this pull request to the merge queue Sep 26, 2025

Merged via the queue into main with commit 4314a1e Sep 26, 2025
32 checks passed

devongovett deleted the quarry_autocomplete_updates branch September 26, 2025 01:09

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

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

Uh oh!

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!

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!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 16, 2025

Uh oh!

rspbot commented Sep 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

rspbot commented Sep 23, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rspbot commented Sep 24, 2025

Uh oh!

rspbot commented Sep 24, 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!

LFDanLu commented Sep 24, 2025

Uh oh!

rspbot commented Sep 24, 2025

Uh oh!

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!

Uh oh!

rspbot commented Sep 25, 2025

Uh oh!

rspbot commented Sep 25, 2025

Uh oh!

rspbot commented Sep 25, 2025

Uh oh!

rspbot commented Sep 25, 2025

Uh oh!

rspbot commented Sep 26, 2025

Uh oh!

rspbot commented Sep 26, 2025

Uh oh!

LFDanLu commented Sep 12, 2025 •

edited

Loading