feat: Automatically detect if wrapped Autocomplete collection supports virtual focus #8862
Conversation
…rable collection and if said collection supports virtual focus
| // moving focus back to the subtriggers | ||
| let isMobileScreenReader = getInteractionModality() === 'virtual' && (isIOS() || isAndroid()); | ||
| let shouldUseVirtualFocus = !isMobileScreenReader && !disableVirtualFocus; | ||
| let [shouldUseVirtualFocus, setShouldUseVirtualFocus] = useState(!isMobileScreenReader && !disableVirtualFocus); |
There was a problem hiding this comment.
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
| // TODO: Unfortunately can't override via styles prop | ||
| // need to unset the overflow otherwise we get two scroll bars | ||
| padding: 0, | ||
| overflow: 'unset' |
There was a problem hiding this comment.
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...
| // 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... |
There was a problem hiding this comment.
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...
There was a problem hiding this comment.
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
| let contextProps; | ||
| [contextProps] = useContextProps({}, null, SelectableCollectionContext); | ||
| let {filter, ...collectionProps} = contextProps; | ||
| [props, ref] = useContextProps(props, ref, SelectableCollectionContext); |
There was a problem hiding this comment.
we now use the ref from useAutocomplete so the Autocomplete input knows it has been connected to a collection element it can filter
|
Build successful! 🎉 |
…tocomplete_updates
|
Build successful! 🎉 |
## 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-aria/utils/@react-aria/utils:DISALLOW_VIRTUAL_FOCUS+DISALLOW_VIRTUAL_FOCUS {
+ UNTYPED
+}@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
offset?: number = 8
onOpenChange?: (boolean) => void
placement?: Placement = 'bottom'
role?: 'dialog' | 'alertdialog' = 'dialog'
shouldFlip?: boolean = true
size?: 'S' | 'M' | 'L'
slot?: string | null
styles?: StylesProp
triggerRef?: RefObject<Element | null>
} |
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:
📝 Test Instructions:
Autocomplete behavior should largely be the same as it already is on main, simply sanity check that
aria-activedescendantonly 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