Adds Support for Dynamic Sizing to ComboBox Virtualization
#2061
Conversation
This file contains 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
…r virtualization to fix keyboard navigation.
…ith e2e test, and add e2e test for dynamic sizing.
mayank99
reviewed
May 23, 2024
…eyboard navigation.
…d reverts the react workshop screenshot.
r100-stack
reviewed
Jun 26, 2024
Co-authored-by: R <45748283+r100-stack@users.noreply.github.com>
r100-stack
reviewed
Jun 28, 2024
…alue deconstruction with rest spread.
…ualized ComboBoxMenu keyboard navigation.
…h of the items array.
r100-stack
approved these changes
Jun 28, 2024
r100-stack
reviewed
Jun 28, 2024
Co-authored-by: R <45748283+r100-stack@users.noreply.github.com>
…/github.com/iTwin/iTwinUI into BenPusey/AddTanstackVirtualForVirtualScroll
3 tasks
mayank99
reviewed
Jul 5, 2024
…back into the ComboBoxMenu component.
mayank99
reviewed
Jul 10, 2024
Ben-Pusey-Bentley
deleted the
BenPusey/AddTanstackVirtualForVirtualScroll
branch
Merged
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.
Changes
Adds support for dynamic sizing to
ComboBoxvirtualization. This is achieved through adding the tanstack virtual package, and adding the measureElement ref to a wrapper around the virtualized items. This fixes an issue where the list box would not be sized correctly for the content if virtualization was enabled and some options had asubLabelvalue.Before:
After:
The spacing between options on the virtualized
ComboBoxis also now slightly different, as a result of using the virtualizer's gap. The react workshop screenshot has been updated accordingly.TreeandTablecomponents in order to remove older virtualization code.Testing
Tested with this vite playground code. Also ran all automated tests. Replaced the failing unit test for keyboard navigation on virtualized
ComboBoxwith an e2e test. Added an e2e test for the checking the dynamic sizing as well. Also updated react workshop test for virtualizedComboBoxwith it's new spacing.Docs
Added react changesets for the dynamic sizing support and the added dependency on
@tanstack/virtual-react.