[EuiDataGrid] Fix paginated & height-limited datagrids becoming unscrollable on rowCount
change
#5400
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.
Summary
Problem
eui/src/components/datagrid/body/data_grid_body.tsx
Line 601 in a648149
height
being set to undefined means thatfinalHeight
falls back tounconstrainedHeight
here on line 641:eui/src/components/datagrid/body/data_grid_body.tsx
Lines 639 to 641 in cb9f462
Which leads to
.euiDataGrid__virtualized
and the inner content being the sameunconstrainedHeight
, resulting in inner content that never scrolls:Before
before.mp4
Solution
Having the main
setHeight()
logic (lines 604-608) respond dynamically torowCount
fixes the issue. I did some testing and was also fairly sure that thesetHeight(undefined)
line was unnecessary and that just addingrowCount
as a dependency/side effect of determining the wrapper height was sufficient to solve the initial issue in #5313, but would appreciate a confirmation of that @chandlerprall!After
after.mp4
Regression testing
regression-test.mp4
Checklist
- [ ] Check against all themes for compatibility in both light and dark modes- [ ] Checked in mobileNOTE: Heights are still not working quite the same on my local Firefox as on Chrome, but we ascertained this appears to be individual to my Firefox in #5313 (comment)
- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examplesNot 100% sure about adding tests for this as #5391 did not have any
- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes