Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(virtual-core): ensure all items render when content height is less than or equal to viewport height #955

Closed
wants to merge 2 commits into from

Conversation

SaeWooKKang
Copy link
Contributor

Fixes #871

Problem:

This issue occurs because when the scroll container size (scrollRect) changes and the maybeNotify function is called, scrollRect is not included in the dependency array, causing the virtual item range to not be calculated correctly.

Solution:

I added scrollRect value to the dependency array of the maybeNotify function, ensuring that the virtual item range is recalculated correctly when the scroll container size changes.

Copy link

changeset-bot bot commented Mar 13, 2025

⚠️ No Changeset found

Latest commit: 2dbd2c3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

nx-cloud bot commented Mar 13, 2025

View your CI Pipeline Execution ↗ for commit 2dbd2c3.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ❌ Failed 2m 24s View ↗
nx run-many --target=build --exclude=examples/** ✅ Succeeded 17s View ↗

☁️ Nx Cloud last updated this comment at 2025-03-13 01:44:21 UTC

Copy link

pkg-pr-new bot commented Mar 13, 2025

Open in Stackblitz

More templates

@tanstack/angular-virtual

npm i https://pkg.pr.new/@tanstack/angular-virtual@955

@tanstack/lit-virtual

npm i https://pkg.pr.new/@tanstack/lit-virtual@955

@tanstack/react-virtual

npm i https://pkg.pr.new/@tanstack/react-virtual@955

@tanstack/solid-virtual

npm i https://pkg.pr.new/@tanstack/solid-virtual@955

@tanstack/svelte-virtual

npm i https://pkg.pr.new/@tanstack/svelte-virtual@955

@tanstack/vue-virtual

npm i https://pkg.pr.new/@tanstack/vue-virtual@955

@tanstack/virtual-core

npm i https://pkg.pr.new/@tanstack/virtual-core@955

commit: 2dbd2c3

@SaeWooKKang
Copy link
Contributor Author

umm.. I think the test fails because the number of renders increases by one in addition to the dependency array.

Is there a better way to fix the bug without fixing the test?

@SaeWooKKang SaeWooKKang changed the title fix: ensure all items render when content height is less than or equal to viewport height fix(virtual-core): ensure all items render when content height is less than or equal to viewport height Mar 13, 2025
@@ -456,6 +456,7 @@ export class Virtualizer<
this.isScrolling,
this.range ? this.range.startIndex : null,
this.range ? this.range.endIndex : null,
this.scrollRect,
Copy link
Collaborator

@piecyk piecyk Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm we are reading the scrollRect in calculateRange via getSize, so the range should be correct

@piecyk
Copy link
Collaborator

piecyk commented Mar 13, 2025

Thanks, @SaeWooKKang, for your work on this! I’ve found a better approach to address this issue in #957, so I’ll be closing this PR in favor of that solution. I really appreciate your effort!.

@piecyk piecyk closed this Mar 13, 2025
@SaeWooKKang
Copy link
Contributor Author

@piecyk I'm glad it was solved in a better way. Thank you for your efforts!

@SaeWooKKang SaeWooKKang deleted the fix/max-height branch March 14, 2025 00:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

react-virtual – Visible items are incorrect on first render when using max-height on container
2 participants