React-Virtualized：CellRender进入下一行

Question

I'm build app with React-virtualized Table. I added some custom cell render inside each Row. Like Label, or some Img.

Everything works great, but there's a weird behavior.

Inside one cell, I added a simple Dropdown to let user choose some value. Actually, my dropdown render go UNDER the next row. After a click, the dropdown expand and keep under next row.

Is there something that I missed ? Is it normal behavior ?

Answer 1

The dropdown menu is getting clipped by the parent row's overflow: hidden style. (It may also be obscured by the following row's background-color if you've set one.)

Here's an example of what I'm talking about wrt clipping: http://plnkr.co/edit/9iMzJh?p=preview

I suggest using something react-portal to avoid clipping problems. I've used this before with Table and have been pretty happy with it.