React Virtualized Table drop down filter in header cut off by overflow: none

Question

We have a React Virtualized Table with a header row.

One (or more) of the header cells will contain a drop down Componentallowing you to select values to filter the column by.

We have created the Component, and the ValuePanel has position: absolute; to make it float above the other elements on the page.

We included it in the header and it mostly works, except that the HeaderRow has overflow:none; on it.

<div
    class="ReactVirtualized__Table__headerRow table-toplevel-row table-toplevel-header"
    role="row"
    style="height: 100px;overflow: hidden;padding-right: 17px;width: 1920px;"
>

This "chops off" the bottom of the panel showing the values.

Reading up on overflow: none; and position: absolute; it seems that the ValuePanel must have a (positional) parent outside of the HeaderRow.

This can be achieved by either:

1. Moving the ValuePanel element so it's no longer an ancestor of the HeaderRow.

2. Having the nearest ancestor of the ValuePanel element with a position of absolute or relative (i.e. it's positional parent) outside of the HeaderRow.

The problem with 1, is that the Component is supposed to be a self-contained and reusable anywhere, so it shouldn't require part of it's HTML to exist outside of itself ... that violates the "self-contained" bit.

The problems with 2 are that we won't always be able to guarantee where the positional parent is in the hierarchy above the ValuePanel unless the positional parent is inside the Component. And the ValuePanel gets it's width from it's positional parent, so if the positional parent is outside of the Component then the width could well be wrong.

We very much want to avoid having to specify a fixed width for the component and/or the ValuePanel. And we want to keep the Component self-contained.

The thought occurred to remove overflow: none; from the HeaderRow, but it's obviously there for a reason. I haven't tested, but I assume getting rid of that would cause issues with header content that, well, overflows. We could replace it with overflow-y: none;overflow-x: hidden;, but again this seems like it's likely to cause issues under certain circumstances.

I had a search around, but I couldn't find any results for it.

Has anyone achieved this before and can provide some insight? Or otherwise has some ideas/advice?

Answer 1

Slightly longer answer now that I'm back at my computer: Check out react-portal.

It lifts content out of the z-index stack (and so avoids clipping problems) while maintaining the visual position of it (top/left), allowing it to render outside of the clipping rect/box of its parent. It's perfect for things like drop-down menus within List or Table.