feat: Async loading support for S2 ComboBox/Picker #7938

LFDanLu · 2025-03-14T22:44:51Z

Closes

Adds loading support for S2 ComboBox/Picker and their RAC equivalents (and RAC ListBox too since that is what ComboBox and Picker uses
refactors useLoadMore to accept collections instead of items

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

Test S2 Combobox/Picker async loading stories and make sure it works as expected (aka infinite scrolling). Also test the RAC equivalents as well as S2 CardView/Table/other components that already had async loading support.

🧢 Your Project:

RSP

…and data-attributes

rspbot · 2025-03-15T00:38:52Z

Build successful! 🎉

rspbot · 2025-03-17T17:27:34Z

Build successful! 🎉

…oad more like v3

rspbot · 2025-03-18T22:38:53Z

Build successful! 🎉

rspbot · 2025-03-19T00:07:14Z

Build successful! 🎉

rspbot · 2025-04-09T21:18:16Z

Build successful! 🎉

LFDanLu · 2025-04-10T20:19:01Z

packages/@react-aria/utils/src/useLoadMore.ts

Make a new hook since util package version might not match up with pinned version of tableview/etc, which makes this a breaking change

…ct-spectrum into loadmore_rac

rspbot · 2025-05-09T00:15:32Z

Build successful! 🎉

rspbot · 2025-05-09T00:44:42Z

Build successful! 🎉

rspbot · 2025-05-09T19:17:41Z

Build successful! 🎉

tested with the Document changes removed and verified that the test fails properly. Swore it failed when I first wrote it...

…sentinel is present

rspbot · 2025-05-09T22:08:27Z

Build successful! 🎉

rspbot · 2025-05-09T22:50:30Z

Build successful! 🎉

reidbarber

LGTM

devongovett · 2025-05-09T23:06:04Z

packages/@react-stately/select/src/useSelectState.ts

@@ -62,6 +62,7 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
  });

  let [isFocused, setFocused] = useState(false);
+  let isEmpty = useMemo(() => listState.collection.size === 0 || (listState.collection.size === 1 && listState.collection.getItem(listState.collection.getFirstKey()!)?.type === 'loader'), [listState.collection]);


not great that stately has to know about this... perhaps we can refactor the isEmpty checks to centralize this logic

rspbot · 2025-05-09T23:44:52Z

Build successful! 🎉

rspbot · 2025-05-09T23:44:53Z

## API Changes

react-aria-components

/react-aria-components:UNSTABLE_createLeafComponent

 UNSTABLE_createLeafComponent <E extends Element, P extends {}> {
   type: string
-  render: (P, ForwardedRef<E>, any) => ReactElement
+  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
-  render: (P, ForwardedRef<E>, Node<T>) => ReactElement
+  render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
   useChildren: (P) => ReactNode
   returnVal: undefined
 }

/react-aria-components:UNSTABLE_TableLoadingIndicator

-UNSTABLE_TableLoadingIndicator <T extends {}> {
-  children?: ReactNode
-  className?: string
-  style?: CSSProperties
-}

/react-aria-components:UNSTABLE_GridListLoadingSentinel

+UNSTABLE_GridListLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_ListBoxLoadingSentinel

+UNSTABLE_ListBoxLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_TableLoadingSentinel

+UNSTABLE_TableLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

@react-aria/collections

/@react-aria/collections:createLeafComponent

 createLeafComponent <E extends Element, P extends {}> {
   type: string
-  render: (P, ForwardedRef<E>, any) => ReactElement
+  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
-  render: (P, ForwardedRef<E>, Node<T>) => ReactElement
+  render: (P, ForwardedRef<E>, Node<T>) => ReactElement | null
   useChildren: (P) => ReactNode
   returnVal: undefined
 }

@react-aria/utils

/@react-aria/utils:UNSTABLE_useLoadMoreSentinel

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

/@react-aria/utils:LoadMoreSentinelProps

+LoadMoreSentinelProps {
+  collection: Collection<Node<unknown>>
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+}

@react-spectrum/button

/@react-spectrum/button:ClearButton

 ClearButton extends ButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   bottom?: Responsive<DimensionValue>
   elementType?: ElementType | JSXElementConstructor<any> = 'button'
   end?: Responsive<DimensionValue>
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   focusClassName?: string
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
-  inset?: boolean
   isHidden?: Responsive<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>
   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>
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   preventFocus?: boolean
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   variant?: 'overBackground'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

 ComboBox <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
+  loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:Picker

 Picker <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:ComboBoxProps

 ComboBoxProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
+  loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:PickerProps

 PickerProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key | null) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

LFDanLu added 11 commits March 7, 2025 16:36

initial support for async loading in Combobox/picker/listbox in RAC

c4ca76d

test against Listbox standalone and put on content size change issue

8ee20f9

update S2 CardView/RAC GridList for new useLoadMore

c2a1cf9

fix v3 load more stories and tests

765b757

update table to call useLoadMore internally

7708b81

first attempt at refactoring useLoadmore

2da7d04

refactor useLoadMore to get rid of scroll handlers

0bb9f21

Add S2 Picker async support, support horizontal scrolling, fix types …

0049153

…and data-attributes

async support for S2 combobox

76e1a05

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

68033b2

fix lint and add horizontal scrolling story

54fcbaa

hack together async listbox virtualized example

4d3bb6c

LFDanLu added 3 commits March 18, 2025 09:50

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

f6ba68a

add loading spinners to RAC stories

3fe09f6

fix FF load more resizable wrapping container table, make s2 picker l…

0b06824

…oad more like v3

update S2 Picker/Combobox so they are described by loading spinner

da166f2

fix Talkback and NVDA announcements for loading spinner

0ef52ef

LFDanLu added the in sprint label Mar 19, 2025

LFDanLu changed the title ~~feat: (WIP) Async loading support for S2 ComboBox and Picker~~ feat: (WIP) Async loading support for S2 ComboBox/Picker and multilevel Tree loading Apr 8, 2025

LFDanLu added 2 commits April 9, 2025 13:59

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

51580d7

clean up some todos

76dc08a

LFDanLu force-pushed the loadmore_rac branch from f9aea93 to 76dc08a Compare April 9, 2025 21:08

LFDanLu changed the title ~~feat: (WIP) Async loading support for S2 ComboBox/Picker and multilevel Tree loading~~ feat: Async loading support for S2 ComboBox/Picker Apr 9, 2025

LFDanLu marked this pull request as ready for review April 9, 2025 21:12

LFDanLu commented Apr 10, 2025

View reviewed changes

LFDanLu added 5 commits May 8, 2025 10:38

Merge branch 's2-combobox-picker-virtualizer' of github.com:adobe/rea…

935e439

…ct-spectrum into loadmore_rac

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

8bd923f

missed yarn.lock conflict

f4e5f0d

fix picker test

a69f298

mixed up which react-dom dep to remove derp

67423b2

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

52e04bc

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

fb0aff3

LFDanLu added 3 commits May 9, 2025 13:30

fix Combobox test so it properly catches previous Document bug

f35df51

tested with the Document changes removed and verified that the test fails properly. Swore it failed when I first wrote it...

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

4637d34

fix cases where extra separators appeared on combobox filter/if load …

b9e2ad7

…sentinel is present

marking the document as dirty when _minInvalidChildIndex is changing

875d9a3

reidbarber previously approved these changes May 9, 2025

View reviewed changes

devongovett previously approved these changes May 9, 2025

View reviewed changes

get rid of extra todos and obsolte test

9026acb

LFDanLu dismissed stale reviews from devongovett and reidbarber via 9026acb May 9, 2025 23:34

devongovett approved these changes May 9, 2025

View reviewed changes

LFDanLu enabled auto-merge May 9, 2025 23:39

dannify approved these changes May 9, 2025

View reviewed changes

LFDanLu added this pull request to the merge queue May 9, 2025

Merged via the queue into main with commit e9bd3a3 May 9, 2025
30 checks passed

LFDanLu deleted the loadmore_rac branch May 9, 2025 23:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Async loading support for S2 ComboBox/Picker #7938

feat: Async loading support for S2 ComboBox/Picker #7938

LFDanLu commented Mar 14, 2025 •

edited

Loading

rspbot commented Mar 15, 2025

rspbot commented Mar 17, 2025

rspbot commented Mar 18, 2025

rspbot commented Mar 19, 2025

rspbot commented Apr 9, 2025

LFDanLu Apr 10, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

reidbarber left a comment

devongovett May 9, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

feat: Async loading support for S2 ComboBox/Picker #7938

feat: Async loading support for S2 ComboBox/Picker #7938

Conversation

LFDanLu commented Mar 14, 2025 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Mar 15, 2025

rspbot commented Mar 17, 2025

rspbot commented Mar 18, 2025

rspbot commented Mar 19, 2025

rspbot commented Apr 9, 2025

LFDanLu Apr 10, 2025

Choose a reason for hiding this comment

rspbot commented May 9, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

rspbot commented May 9, 2025

reidbarber left a comment

Choose a reason for hiding this comment

devongovett May 9, 2025

Choose a reason for hiding this comment

rspbot commented May 9, 2025

rspbot commented May 9, 2025

react-aria-components

/react-aria-components:UNSTABLE_createLeafComponent

/react-aria-components:UNSTABLE_createBranchComponent

/react-aria-components:UNSTABLE_TableLoadingIndicator

/react-aria-components:UNSTABLE_GridListLoadingSentinel

/react-aria-components:UNSTABLE_ListBoxLoadingSentinel

/react-aria-components:UNSTABLE_TableLoadingSentinel

@react-aria/collections

/@react-aria/collections:createLeafComponent

/@react-aria/collections:createBranchComponent

@react-aria/utils

/@react-aria/utils:UNSTABLE_useLoadMoreSentinel

/@react-aria/utils:LoadMoreSentinelProps

@react-spectrum/button

/@react-spectrum/button:ClearButton

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

/@react-spectrum/s2:Picker

/@react-spectrum/s2:ComboBoxProps

/@react-spectrum/s2:PickerProps

LFDanLu commented Mar 14, 2025 •

edited

Loading