Dropdown menu showing inside cell

[luisleong]

Dropdown menu is showing inside cell, not even with css position fixed or absolute it will be shown above the cell and grid.

To Reproduce

1. install any dropdown menu (tested with '@szhsin/react-menu' and coreui components)
2. open dropdown items list (it won't be shown)

Link to code example: { key: "options", name: "Options", formatter(props) { const { row } = props; return (<Menu menuButton={<MenuButton>Overflow</MenuButton>} overflow={'visible'} position={'auto'}> {new Array(50).fill(0).map( (_, i) => <MenuItem key={i}>Item {i + 1}</MenuItem>)} </Menu>) } }

Expected behavior: For the dropdown menu to be shown over the cell and grid.

Environment

• react-data-grid version: "react-data-grid": "^7.0.0-beta.11",
• react/react-dom version: "^17.0.1",

Additional context

[amanmahajan7]

Please check https://github.com/adazzle/react-data-grid/issues/2709#issuecomment-1010239549.

[luisleong]

Please check #2709 (comment).

The way I solved, was really ugly, but still did solve it. With css, remove the contain and overflow of the entire cell.

div[role="gridcell"][aria-colindex="1"] {
  contain: none !important;
  overflow: visible !important;
}

[vine1993]

I did resolve with css as well. .rdg .rdg-row .rdg-cell.rdg-editor-container { padding:0; overflow: visible; contain: size style; }

[ding-si-han]

For those attempting to have a dropdown for the column header, changing the rdg-header-row class does the fix (kudos to @vine1993 for the css! 🎉 )

.rdg .rdg-header-row .rdg-cell { padding:0; overflow: visible; contain: size style; }