Popups inside cells do not overlay adjacent cells, and are truncated

[redler]

Using the enterprise version of ReactDataGrid, I have cells that contain a control that pops up a menu. The issue is that the menu pops up "inside" the cell, most of it thus disappearing underneath the adjacent cells. Setting a high z-index on the popup does not change this. I'm guessing that some sort of "portaling" is necessary, but not sure how best to approach that. Has anyone come up with a solution to this?

[redler]

FYI I've tried the simple approach of using overflow: visible, which does allow the popped-up menu to be visible horizontally (overlaying the cell to the right), but it remains cut off by the bottom row boundary. This remains the case even if that row's css is set to overflow: visible.

(I'm aware that we're directed to StackOverflow for some categories of issue, but there are zero questions/answers over there tagged with ReactDataGrid, so it doesn't appear to be a viable support "community")

[VasilyShelkov]

I came across this same problem. The only way I found to fix this was using React Portal to render outside of the table. In my case this was built into the library of component I'm using (Chakra Popper with portal)

[redler]

@VasilyShelkov I also ended up working around this issue by portaling the menu (I'm using the radix library). That then led to an issue where, on a long dataset, clicking the menu on a row near the top somehow caused the rendered menu to be located pinned to the bottom of the viewport (it was somehow getting confused by how the click-to-select logic is implemented in ReactDataGrid). The easiest way to solve this secondary problem was to disable row selection in RDG.