[EuiDataGrid] Fix open cell popovers causing auto height rows to bug out#5618
[EuiDataGrid] Fix open cell popovers causing auto height rows to bug out#5618cee-chen wants to merge 3 commits intoelastic:mainfrom
Conversation
- can be conditional JSX instead of repeating EuiDataGridCellContent again
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5618/ |
chandlerprall
left a comment
There was a problem hiding this comment.
This works for now to get a fix out, the root cause is coming from the wrapped portal's dom node being injected next to the cell content, cutting the width in half which can scale down content (e.g. images). Let's chat tomorrow and I'll show you what I've tracked down, and where I'm getting confused with trying to debug all these DOM nodes.
|
Definitely super happy to pair on this and try to figure out what the heck is going on haha. It sounds like what you're saying is that maybe flexbox is the issue? Super interesting, I hadn't thought of that! EDIT: Yup, I just turned off |
|
Closing this in favor of #5622 - after having done more cross-browser testing, I'm confident it's the better direction to go in |
Summary
This was introduced in #5550 by our conversion to
EuiWrappingPopover, which now dynamically inserts 2 extra DOM nodes around the cell popover anchor wrapper only when the popover is open:For some bizarre reason, this triggers the cell content's
offsetHeightto briefly be larger than it should be, which immediately updates the row height cache even though the cell content height returns to normal almost immediately after.The easiest solution I could think of was to avoid setting the row height cache when the popover is opening, but I'm not sure if this will have unintentional side effects on consumer updates when the user has the popover open - those are likely very edge case, fingers crossed. I think the absolute best long-term solution might be to try and make
EuiWrappingPopover/EuiPopoveroptionally not add DOM wrappers, but this might be the best fix in the interim, unless you can think of something else.Really hoping we can get this merged in / backported along with the type fixes for the next Kibana upgrade! 🙏
Before
After
Checklist
- [ ] Check against all themes for compatibility in both light and dark modes- [ ] Checked in mobile- [ ] Checked in Chrome, Safari, Edge, and Firefox- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes