React Virtualized Table header 中的下拉过滤器被溢出切断：none

Question

我们有一个带有 header 行的 React Virtualized Table。

一个（或多个）header 单元格将包含一个 drop down 组件，允许您使用 select 值过滤列。

我们已经创建了组件，并且 ValuePanel position: absolute; 使其浮动在页面上的其他元素之上。

我们将它包含在 header 中并且它大部分都有效，除了 HeaderRow 上有 overflow:none;。

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

此 "chops off" 显示值的面板底部。

阅读 overflow: none; 和 position: absolute; 似乎 ValuePanel 必须在 HeaderRow 之外有一个（位置）parent。

这可以通过以下任一方式实现：

移动 ValuePanel 元素，使其不再是 HeaderRow 的祖先元素。
具有 absolute 或 relative 的 position 的 ValuePanel 元素的最近祖先（即它的位置 parent）在HeaderRow.

1 的问题是组件应该是 self-contained 并且可以在任何地方重复使用，因此它不应该要求 HTML 的一部分存在于自身之外......这违反了 "self-contained" 位。

2 的问题是我们无法始终保证位置 parent 在 ValuePanel 之上的层次结构中的位置，除非位置 parent 在组件内部。并且 ValuePanel 从它的位置 parent 获取它的宽度，所以如果位置 parent 在组件之外，那么宽度很可能是错误的。

我们非常希望避免必须为组件 and/or ValuePanel 指定固定宽度。我们想保留组件 self-contained.

想到从 HeaderRow 中删除 overflow: none;，但显然这是有原因的。我没有测试过，但我假设摆脱它会导致 header 内容出现问题，好吧，溢出。我们可以将其替换为 overflow-y: none;overflow-x: hidden;，但这似乎在某些情况下可能会导致问题。

我四处搜索，但找不到任何结果。

有没有人以前实现过这个并且可以提供一些见解？或者有一些 ideas/advice?

Answer 1

现在我回到我的电脑前，回答稍微长一点：查看 react-portal。

它将内容从 z-index 堆栈中提取出来（因此避免了裁剪问题），同时保持它的视觉位置 (top/left)，允许它在裁剪之外呈现 rect/box 的 parent。它非常适合 List 或 Table 中的 drop-down 菜单。

React Virtualized Table header 中的下拉过滤器被溢出切断：none

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

react-virtualized