fix: Virtualizer should layout items using a consistent size#9889
Merged
devongovett merged 3 commits intomainfrom Apr 8, 2026
Merged
fix: Virtualizer should layout items using a consistent size#9889devongovett merged 3 commits intomainfrom
devongovett merged 3 commits intomainfrom
Conversation
snowystinger
reviewed
Apr 8, 2026
Member
snowystinger
left a comment
There was a problem hiding this comment.
Tested mobile and desktop, looks like the CardView is now working as expected. Will wait for verdaccio to be disabled again and then I'll approve
This reverts commit be5b1c5.
|
Build successful! 🎉 |
## API Changes
@react-aria/virtualizer/@react-aria/virtualizer:ScrollView ScrollView extends HTMLAttributes {
+ allowsWindowScrolling?: boolean
children?: ReactNode
contentSize: Size
innerStyle?: CSSProperties
onScroll?: (Event) => void
onScrollEnd?: () => void
onScrollStart?: () => void
+ onSizeChange?: (Size) => void
onVisibleRectChange: (Rect) => void
scrollDirection?: 'horizontal' | 'vertical' | 'both'
}@react-stately/virtualizer/@react-stately/virtualizer:VirtualizerState VirtualizerState <T extends {}, V> {
contentSize: Size
endScrolling: () => void
isScrolling: boolean
+ setSize: (Size) => void
setVisibleRect: (Rect) => void
+ size: Size
startScrolling: () => void
virtualizer: Virtualizer<{}, V>
visibleViews: Array<ReusableView<{}, V>>
} |
reidbarber
approved these changes
Apr 8, 2026
snowystinger
approved these changes
Apr 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes an issue caught in our S2 example apps in small viewports where the card view would appear to scroll faster than the rest of the page. This was due to the visibleRect changing size as the window scrolls when the CardView is larger than the window viewport. We need this to implement window scrolling, but the layouts (e.g. GridLayout) also use the visibleRect's size to determine how many columns of items to display etc. This resulted in the layout's
contentSizebeing updated during scrolling, causing the scroll position to be clamped.To fix this we need to introduce a separate
virtualizer.sizeproperty to hold the size of the virtualizer regardless of the window scroll position. This way item layout is consistent. ScrollView now has an onSizeChange callback and this gets propagated down to the virtualizer state.To make this not a breaking change which would require updates to v3, window scrolling support is now opt-in in the hooks, and only enabled by default in RAC. We fall back to the visibleRect size in this case.