feat: (WIP) Async loading support for S2 ComboBox and Picker #7938

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

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:

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-03-19T00:07:15Z

## API Changes

react-aria-components

/react-aria-components:ComboBox

 ComboBox <T extends {}> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((ComboBoxRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ComboBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   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
   shouldFocusWrap?: boolean
   style?: CSSProperties | ((ComboBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:GridList

 GridList <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   dragAndDropHooks?: DragAndDropHooks
   id?: string
+  isLoading?: boolean
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
+  onLoadMore?: () => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ListBox

 ListBox <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
+  isLoading?: boolean
   items?: Iterable<T>
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
+  onLoadMore?: () => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:Select

 Select <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   style?: CSSProperties | ((SelectRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:Table

 Table {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: string | ((TableRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = "selection"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
+  isLoading?: boolean
+  onLoadMore?: () => any
   onRowAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
   style?: CSSProperties | ((TableRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ColorSwatchPickerRenderProps

 ColorSwatchPickerRenderProps {
   isEmpty: boolean
   isFocusVisible: boolean
   isFocused: boolean
+  isLoading?: boolean
   layout: 'stack' | 'grid'
   state: ListState<unknown>
 }

/react-aria-components:ComboBoxProps

 ComboBoxProps <T extends {}> {
   allowsCustomValue?: boolean
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode | ((ComboBoxRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ComboBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultFilter?: (string, string) => boolean
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   menuTrigger?: MenuTriggerAction = 'input'
   name?: string
   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
   shouldFocusWrap?: boolean
   style?: CSSProperties | ((ComboBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:ComboBoxRenderProps

 ComboBoxRenderProps {
   isDisabled: boolean
   isInvalid: boolean
+  isLoading?: boolean
   isOpen: boolean
   isRequired: boolean
 }

/react-aria-components:GridListProps

 GridListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((GridListRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   disallowTypeAhead?: boolean = false
   dragAndDropHooks?: DragAndDropHooks
   id?: string
+  isLoading?: boolean
   items?: Iterable<T>
   keyboardNavigationBehavior?: 'arrow' | 'tab' = 'arrow'
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
+  onLoadMore?: () => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   style?: CSSProperties | ((GridListRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:GridListRenderProps

 GridListRenderProps {
   isDropTarget: boolean
   isEmpty: boolean
   isFocusVisible: boolean
   isFocused: boolean
+  isLoading?: boolean
   layout: 'stack' | 'grid'
   state: ListState<unknown>
 }

/react-aria-components:ListBoxProps

 ListBoxProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((ListBoxRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
+  isLoading?: boolean
   items?: Iterable<T>
   layout?: 'stack' | 'grid' = 'stack'
   onAction?: (Key) => void
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
+  onLoadMore?: () => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   orientation?: Orientation = 'vertical'
   renderEmptyState?: (ListBoxRenderProps) => ReactNode
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldFocusWrap?: boolean
   slot?: string | null
   style?: CSSProperties | ((ListBoxRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ListBoxRenderProps

 ListBoxRenderProps {
   isDropTarget: boolean
   isEmpty: boolean
   isFocusVisible: boolean
   isFocused: boolean
+  isLoading?: boolean
   layout: 'stack' | 'grid'
   state: ListState<unknown>
 }

/react-aria-components:SelectProps

 SelectProps <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   style?: CSSProperties | ((SelectRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:SelectRenderProps

 SelectRenderProps {
   isDisabled: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isInvalid: boolean
+  isLoading?: boolean
   isOpen: boolean
   isRequired: boolean
 }

/react-aria-components:TableProps

 TableProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   className?: string | ((TableRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   disabledBehavior?: DisabledBehavior = "selection"
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
+  isLoading?: boolean
+  onLoadMore?: () => any
   onRowAction?: (Key) => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   selectionBehavior?: SelectionBehavior = "toggle"
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
   style?: CSSProperties | ((TableRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:TableRenderProps

 TableRenderProps {
   isDropTarget: boolean
   isFocusVisible: boolean
   isFocused: boolean
+  isLoading?: boolean
   state: TableState<unknown>
 }

/react-aria-components:QueuedToast

-QueuedToast <T> {
-  content: T
-  key: string
-  onClose?: () => void
-  timeout?: number
-  timer?: Timer
-}

/react-aria-components:UNSTABLE_GridListLoadingIndicator

+UNSTABLE_GridListLoadingIndicator <T extends {}> {
+  children?: ReactNode
+  className?: string
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_ListBoxLoadingIndicator

+UNSTABLE_ListBoxLoadingIndicator <T extends {}> {
+  children?: ReactNode
+  className?: string
+  style?: CSSProperties
+}

@react-aria/virtualizer

/@react-aria/virtualizer:ScrollView

 ScrollView extends HTMLAttributes {
   children?: ReactNode
   contentSize: Size
   innerStyle?: CSSProperties
   onScrollEnd?: () => void
   onScrollStart?: () => void
   onVisibleRectChange: (Rect) => void
   scrollDirection?: 'horizontal' | 'vertical' | 'both'
+  sentinelRef: React.RefObject<HTMLDivElement | null>
 }

/@react-aria/virtualizer:useScrollView

 useScrollView {
-  props: ScrollViewProps
+  props: ScrollViewOptions
   ref: RefObject<HTMLElement | null>
   returnVal: undefined
 }

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

 ComboBox <T extends {}> {
   UNSAFE_className?: string
   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?: string
   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) => void
   placeholder?: string
   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?: string
   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?: string
   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) => void
   placeholder?: string
   selectedKey?: Key | null
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

see comments for bugs noted

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

initial progress for making Tree loadmore spinner keyboard focusable

f9aea93

see comments for bugs noted

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: (WIP) Async loading support for S2 ComboBox and Picker #7938

feat: (WIP) Async loading support for S2 ComboBox and Picker #7938

LFDanLu commented Mar 14, 2025

rspbot commented Mar 15, 2025

rspbot commented Mar 17, 2025

rspbot commented Mar 18, 2025

rspbot commented Mar 19, 2025

rspbot commented Mar 19, 2025

feat: (WIP) Async loading support for S2 ComboBox and Picker #7938

Are you sure you want to change the base?

feat: (WIP) Async loading support for S2 ComboBox and Picker #7938

Conversation

LFDanLu commented Mar 14, 2025

✅ 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 Mar 19, 2025

react-aria-components

/react-aria-components:ComboBox

/react-aria-components:GridList

/react-aria-components:ListBox

/react-aria-components:Select

/react-aria-components:Table

/react-aria-components:ColorSwatchPickerRenderProps

/react-aria-components:ComboBoxProps

/react-aria-components:ComboBoxRenderProps

/react-aria-components:GridListProps

/react-aria-components:GridListRenderProps

/react-aria-components:ListBoxProps

/react-aria-components:ListBoxRenderProps

/react-aria-components:SelectProps

/react-aria-components:SelectRenderProps

/react-aria-components:TableProps

/react-aria-components:TableRenderProps

/react-aria-components:QueuedToast

/react-aria-components:UNSTABLE_GridListLoadingIndicator

/react-aria-components:UNSTABLE_ListBoxLoadingIndicator

@react-aria/virtualizer

/@react-aria/virtualizer:ScrollView

/@react-aria/virtualizer:useScrollView

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

/@react-spectrum/s2:Picker

/@react-spectrum/s2:ComboBoxProps

/@react-spectrum/s2:PickerProps