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

[EuiDataGrid] Fix row height changes from the rowHeightsOptions prop not correctly triggering grid rerenders #5712

Merged
merged 11 commits into from
Mar 18, 2022

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Mar 10, 2022

Summary

This PR closes #5700, which is rowHeightsOptions props changes not correctly triggering body rerenders (and thus leaving stale scrollbar artifacts per the linked issue).

I recommend following along by commit, as I also added some incidental code cleanup & comments in the 2nd commit.

@chandlerprall, I'm not sure if this approach is too much of a sledgehammer vs a more nuanced way of calling rerenderGridBody - feel free to shout if you have any other ideas.

Before

This issue was occuring for both lineCount and static height changes, but not auto height because auto height rerenders the grid body when it sets the height cache.

lineCountBefore

staticHeightBefore

You can see on the first change that the grid height/width is not correctly changing (based on scroll bars not appearing/disappearing when they should), but subsequent rerenders do cause the correct appearance.

After

after

Checklist

I left out Jest tests for now as we don't currently have any for useRowHeightUtils, but would be open to adding them as part of this PR if we think this approach is fine.

- move rowHeightUtils.setRerenderGridBody to same location as rowHeightUtils.setGrid

- move inline comment to where fn is being invoked

- update useRowHeightUtils hook comment
- not totally sure why this requestAnimationFrame is causing issues but not others
@cee-chen cee-chen requested a review from chandlerprall March 10, 2022 22:16
Comment on lines +455 to +458
// Mock requestAnimationFrame to run immediately
jest
.spyOn(window, 'requestAnimationFrame')
.mockImplementation((cb: any) => cb());
Copy link
Contributor Author

@cee-chen cee-chen Mar 10, 2022

Choose a reason for hiding this comment

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

Not totally sure what other options we have, but without this we get a bunch of React async errors on data_grid.test.tsx 😕 (same for setTimeout as well, I tried both)

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5712/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5712/

Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

LGTM! Doesn't feel too sledge-hammery, and could help catch similar things slipping by.

Tested this by bringing the datagrid.js example changes locally to confirm that setup recreates the issue, then tested the published example and saw no extra lines hanging out.

@cee-chen
Copy link
Contributor Author

Sweet! I'll probably end up writing unit tests for useRowHeightUtils while I'm here/before merging

@cee-chen cee-chen enabled auto-merge (squash) March 18, 2022 20:19
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5712/

@cee-chen cee-chen merged commit 740b817 into elastic:main Mar 18, 2022
@cee-chen cee-chen deleted the datagrid/5700 branch March 18, 2022 21:10
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.

[EuiDataGrid] controlling row height from outside controls lead to stale rendering artifacts
3 participants