Chevron unfolding produces blank table portion until further interaction
steve-ochoa opened this issue · comments
Describe the bug
This bug occurs when using a Chevron cell grid. When a Chevron is unfolded, the table is sized correctly but a number of rows at the bottom of the table appear blank. When another interaction occurs, e.g. another chevron is unfolded, user scrolls horizontally, or window resized, then the blank rows magically appear.
Current behavior
I produced the behavior using the ReactGrid website Budget Planner example here.
I added many child rows at several levels in the hierarchy of the grid. When I click the Chevron icon to unfold a cell and display its children, there is a large portion left blank at the bottom of the table. The table is sized correctly, so it is clear that the rows are not supposed to be blank.
Then when using the scroll bar, resizing the window, or interacting with other Chevrons, the blank rows at the bottom of the table magically appear.
Unfolding and folding Chevrons produces similar blank portion at the bottom of the table with further interactions. Likewise, scrolling/chevron unfolding/window resize causes the blank rows to magically appear. So it appears it's not just a one-time initial render issue.
It may be in the helper functions for that specific Budget Planner example, I'm unsure.
Expected behavior
When clicking a Chevron to unfold, all rows in the table should be rendered. There should be no blank portion at the bottom.
Your environment details
- Device: Desktop
- OS: macOS
- Browser: Chrome
Hi! I investigated the issue and, as you've reported, some rows stay invisible after toggling the chevron on the examples page. Unfortunately I couldn't reproduce it outside our website. I copied that example's source to our project and it works as intended.
Have you experienced similar problems outside our page? If so please let us know.