How to use a select dropdown in a virtualized list?

Question

Im currently developing a react app which has a virtualized list (https://github.com/bvaughn/react-virtualized) in it. The items in the list may contain a select dropdown.

The problem now: The virtualized list is hiding overflow. So the last items dropdown is not displayed and you cannot scroll down to view the content of the dropdown:

================= Here is where the image ends ================

I have no idea, how I could fix this issue, without changing the virtualized list code. Anybody out there?

score 2 · Accepted Answer · answered Oct 12 '17 at 15:42

2

react-virtualized can't use overflow: visible without breaking scroll behavior (which is pretty key to how react-virtualized works). So things like drop-downs will get clipped as you've observed.

What I typically recommend for people wanting to put things like drop-down menus inside of react-virtualized rows is to use a portal. This allows the menu content to expand outside of a single row (or even the entire List) without being clipped.

I've used tajo/react-portal in the past for this.

answered Oct 12 '17 at 15:42

bvaughn

13,300
45
46

Portals are now an integral part of React 16. See https://reactjs.org/docs/portals.html – Benoît d'Oncieu Oct 12 '17 at 16:30
1

react-portal uses React 16's portals API. The reason I recommended using it instead of the barebones portal API is that it manages things like positioning the "drop down" over its target button. – bvaughn Oct 12 '17 at 18:38
Didn't realise that this project had been updated to use React 16, thanks for pointing it out! – Benoît d'Oncieu Oct 12 '17 at 21:08
Has anyone used Portal with Table? Any hint will be appreciable I am stuck since two todays. – Reyansh Mishra Nov 11 '18 at 00:42

How to use a select dropdown in a virtualized list?

1 Answers1