react-virtualized
react-virtualized copied to clipboard
Cell's with dropdown menus can be cut-off by the Grid's inner container
What is the current behaviour?
When a cell in the Grid contains a custom drop down menu component, the drop down menu is cut-off by the inner scroll container regardless of the size of the Grid.
I'm using the @atlaskit/dropdown-menu in my example but it should occur with other similar components.
See here: https://codesandbox.io/s/j1w3zxxjq5
What's interesting is that it actually works fine in the Collection component.
See here: https://codesandbox.io/s/7y27qmy6y1
The difference seems to be that the Grid places a position: relative style on both the outer and inner div's whilst the Collection container only places a position: relative on the outer div. If I remove the position: relative from the inner div it all works fine.
I can't think of a good reason why both div's need the style as they're in the same position but I don't know the in's and out's of this library.
Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?
Browser: Chrome react: 16.4.2 react-virtualized: 9.21.0