fix: Fix Table disabled state + Safari loadMore and scroll Combobox selected item into view when opening via click #8224

LFDanLu · 2025-05-12T18:10:16Z

caught by chromatic

✅ 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

…hen loading sentinel is provided

rspbot · 2025-05-12T18:21:34Z

Build successful! 🎉

…fari position absolute/relative is not really well supported in Safari making the loading sentinel not scroll into view when scrolling the table

LFDanLu · 2025-05-13T17:02:56Z

https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=948, can ignore the one failure, that is known and unrelated to this PR

rspbot · 2025-05-13T17:11:28Z

Build successful! 🎉

…via trigger click

LFDanLu · 2025-05-13T21:05:02Z

packages/@react-spectrum/combobox/test/ComboBox.test.js

For now I'm skipping these tests until we do more testing and confirm if we want to focus + scroll the ComboBox selected item into view when opening the drop down via click. These tests originate from #1014 but I don't remember/can't find any reason why we don't want this behavior other than a214902. The NVDA problem shouldn't apply since we still clear focus when the input field is modified, but will test

One potential weird point may be if you have a selected key and allowsCustomValue, where then if you backspace once the dropdown will open and an item will be focused, preventing a subsequent ENTER keypress from submitting your custom value

rspbot · 2025-05-13T21:32:45Z

Build successful! 🎉

devongovett · 2025-05-14T23:34:48Z

packages/@react-aria/table/src/useTableSelectionCheckbox.ts

@@ -64,7 +64,7 @@ export function useTableSelectAllCheckbox<T>(state: TableState<T>): TableSelectA
    checkboxProps: {
      'aria-label': stringFormatter.format(selectionMode === 'single' ? 'select' : 'selectAll'),
      isSelected: isSelectAll,
-      isDisabled: selectionMode !== 'multiple' || state.collection.size === 0,
+      isDisabled: selectionMode !== 'multiple' || (state.collection.size === 0 || (state.collection.rows.length === 1 && state.collection.rows[0].type === 'loader')),


snowystinger · 2025-05-15T03:06:45Z

packages/react-aria-components/test/Table.test.js

@@ -1874,7 +1874,7 @@ describe('Table', () => {
      expect(loaderRow).toHaveTextContent('spinner');

      let sentinel = tree.getByTestId('loadMoreSentinel');
-      expect(sentinel.parentElement).toHaveAttribute('inert');
+      expect(sentinel.parentElement.parentElement).toHaveAttribute('inert');


seems brittle, can we just use sentinel.closest('[inert]') is truthy?

sure, was mainly concerned about that possibly matching a higher level inert element and still passing, but I'll see about limiting it to the body

rspbot · 2025-05-15T17:35:03Z

Build successful! 🎉

rspbot · 2025-05-15T18:09:59Z

Build successful! 🎉

This reverts commit a4f12d8.

rspbot · 2025-05-15T20:27:26Z

Build successful! 🎉

rspbot · 2025-05-15T20:27:27Z

## API Changes

react-aria-components

/react-aria-components:DropIndicator

 DropIndicator {
-  activateButtonRef?: RefObject<FocusableElement | null>
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target: DropTarget
 }

/react-aria-components:TreeItemRenderProps

 TreeItemRenderProps {
-  allowsDragging?: boolean
   hasChildItems: boolean
   id: Key
   isDisabled: boolean
-  isDragging?: boolean
-  isDropTarget?: boolean
   isExpanded: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isPressed: boolean
   isSelected: boolean
   level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   state: TreeState<unknown>
 }

/react-aria-components:TreeItemContentRenderProps

 TreeItemContentRenderProps {
-  allowsDragging?: boolean
   hasChildItems: boolean
   id: Key
   isDisabled: boolean
-  isDragging?: boolean
-  isDropTarget?: boolean
   isExpanded: boolean
   isFocusVisible: boolean
   isFocusVisibleWithin: boolean
   isFocused: boolean
   isPressed: boolean
   isSelected: boolean
   level: number
   selectionBehavior: SelectionBehavior
   selectionMode: SelectionMode
   state: TreeState<unknown>
 }

/react-aria-components:DragAndDropOptions

 DragAndDropOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate?: DropTargetDelegate
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>) => Array<DragItem> = () => []
   isDisabled?: boolean
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
-  onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
-  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   renderDragPreview?: (Array<DragItem>) => JSX.Element
   renderDropIndicator?: (DropTarget) => JSX.Element
 }

/react-aria-components:DropIndicatorProps

 DropIndicatorProps {
-  activateButtonRef?: RefObject<FocusableElement | null>
   children?: ReactNode | ((DropIndicatorRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropIndicatorRenderProps & {
 })) => string
   style?: CSSProperties | ((DropIndicatorRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   target: DropTarget
 }

@react-aria/dnd

/@react-aria/dnd:DroppableCollectionOptions

 DroppableCollectionOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate: DropTargetDelegate
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   keyboardDelegate: KeyboardDelegate
   onDrop?: (DroppableCollectionDropEvent) => void
-  onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
-  onKeyDown?: (KeyboardEvent) => void
-  onMove?: (DroppableCollectionReorderEvent) => void
+  onKeyDown?: KeyboardEvents['onKeyDown']
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
 }

/@react-aria/dnd:DroppableItemOptions

 DroppableItemOptions {
-  activateButtonRef?: RefObject<FocusableElement | null>
   target: DropTarget
 }

/@react-aria/dnd:DropIndicatorProps

 DropIndicatorProps {
-  activateButtonRef?: RefObject<FocusableElement | null>
   target: DropTarget
 }

@react-spectrum/dnd

/@react-spectrum/dnd:DragAndDropOptions

 DragAndDropOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   getAllowedDropOperations?: () => Array<DropOperation>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   getItems?: (Set<Key>) => Array<DragItem> = () => []
   onDragEnd?: (DraggableCollectionEndEvent) => void
   onDragMove?: (DraggableCollectionMoveEvent) => void
   onDragStart?: (DraggableCollectionStartEvent) => void
   onDrop?: (DroppableCollectionDropEvent) => void
-  onDropActivate?: (DroppableCollectionActivateEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
-  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   renderPreview?: (Set<Key>, Key) => JSX.Element
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean

@react-stately/dnd

/@react-stately/dnd:DroppableCollectionStateOptions

 DroppableCollectionStateOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   collection: Collection<Node<unknown>>
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   isDisabled?: boolean
   onDrop?: (DroppableCollectionDropEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
-  onMove?: (DroppableCollectionReorderEvent) => void
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   selectionManager: MultipleSelectionManager
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean

Fix select all checkbox disabled state and other empty state issues w…

4669b74

…hen loading sentinel is provided

LFDanLu added the release label May 12, 2025

snowystinger previously approved these changes May 12, 2025

View reviewed changes

update table loading sentinel styles for non-virtualized tables in Sa…

687d781

…fari position absolute/relative is not really well supported in Safari making the loading sentinel not scroll into view when scrolling the table

LFDanLu dismissed snowystinger’s stale review via 687d781 May 13, 2025 00:26

fix tests

782e150

LFDanLu changed the title ~~fix: Fix select all checkbox disabled state and other empty state issues when loading sentinel is provided~~ fix: Fix select all checkbox disabled state when loading sentinel is provided and Safari loadMore when non-virtualized May 13, 2025

test scrolling the selected item into view when opening the dropdown …

49f0e7b

…via trigger click

LFDanLu changed the title ~~fix: Fix select all checkbox disabled state when loading sentinel is provided and Safari loadMore when non-virtualized~~ fix: Fix Table disabled state + Safari loadMore and scroll Combobox selected item into view when opening via click May 13, 2025

LFDanLu commented May 13, 2025

View reviewed changes

forgot to skip some others

82d998c

devongovett previously approved these changes May 14, 2025

View reviewed changes

snowystinger reviewed May 15, 2025

View reviewed changes

make loader not sticky, follow S1 design

a4f12d8

LFDanLu dismissed devongovett’s stale review via a4f12d8 May 15, 2025 17:25

LFDanLu added 2 commits May 15, 2025 10:44

updating combobox tests to fit new behavior

d7be6fa

review comments

cbae0a8

Revert "make loader not sticky, follow S1 design"

3d64f8f

This reverts commit a4f12d8.

devongovett approved these changes May 15, 2025

View reviewed changes

yihuiliao approved these changes May 15, 2025

View reviewed changes

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

Merged via the queue into main with commit 671f0b4 May 15, 2025
30 checks passed

LFDanLu deleted the table_chromatic_fixes branch May 15, 2025 21:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Fix Table disabled state + Safari loadMore and scroll Combobox selected item into view when opening via click #8224

fix: Fix Table disabled state + Safari loadMore and scroll Combobox selected item into view when opening via click #8224

Uh oh!

LFDanLu commented May 12, 2025

Uh oh!

rspbot commented May 12, 2025

Uh oh!

LFDanLu commented May 13, 2025 •

edited

Loading

Uh oh!

rspbot commented May 13, 2025

Uh oh!

LFDanLu May 13, 2025 •

edited

Loading

Uh oh!

LFDanLu May 13, 2025

Uh oh!

rspbot commented May 13, 2025

Uh oh!

devongovett May 14, 2025

Uh oh!

snowystinger May 15, 2025

Uh oh!

LFDanLu May 15, 2025

Uh oh!

rspbot commented May 15, 2025

Uh oh!

rspbot commented May 15, 2025

Uh oh!

rspbot commented May 15, 2025

Uh oh!

rspbot commented May 15, 2025

Uh oh!

Uh oh!

Uh oh!

fix: Fix Table disabled state + Safari loadMore and scroll Combobox selected item into view when opening via click #8224

fix: Fix Table disabled state + Safari loadMore and scroll Combobox selected item into view when opening via click #8224

Uh oh!

Conversation

LFDanLu commented May 12, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented May 12, 2025

Uh oh!

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

Uh oh!

Uh oh!

rspbot commented May 13, 2025

Uh oh!

LFDanLu May 13, 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 May 13, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented May 13, 2025

Uh oh!

devongovett May 14, 2025

Choose a reason for hiding this comment

Uh oh!

snowystinger May 15, 2025

Choose a reason for hiding this comment

Uh oh!

LFDanLu May 15, 2025

Choose a reason for hiding this comment

Uh oh!

rspbot commented May 15, 2025

Uh oh!

rspbot commented May 15, 2025

Uh oh!

rspbot commented May 15, 2025

Uh oh!

rspbot commented May 15, 2025

react-aria-components

/react-aria-components:DropIndicator

/react-aria-components:TreeItemRenderProps

/react-aria-components:TreeItemContentRenderProps

/react-aria-components:DragAndDropOptions

/react-aria-components:DropIndicatorProps

@react-aria/dnd

/@react-aria/dnd:DroppableCollectionOptions

/@react-aria/dnd:DroppableItemOptions

/@react-aria/dnd:DropIndicatorProps

@react-spectrum/dnd

/@react-spectrum/dnd:DragAndDropOptions

@react-stately/dnd

/@react-stately/dnd:DroppableCollectionStateOptions

Uh oh!

Uh oh!

Uh oh!

LFDanLu commented May 13, 2025 •

edited

Loading

LFDanLu May 13, 2025 •

edited

Loading