制表符 - 自定义单元格编辑器未完全打开

Question

要求是对基于制表符的表格中的某些单元格进行“内联编辑”。 该单元格需要自定义编辑器，因为输入是自定义组件（已在 Tabulator 之外的其他表单中使用）。

我们的环境是 React + Tabulator (v4.7) + BlueprintJS 作为组件库。

问题是该组件无法在 Tabulator 中作为自定义编辑器完全打开，而在 Tabulator 之外以常规形式正常工作。

为什么组件不能完全打开？

用作此单元格的“编辑器”的自定义组件使用蓝图 (BP) 的“弹出框”，因此它具有弹出框目标和内容。这是它在表单编辑中的样子：

问题是在点击时，弹出框目标被渲染但弹出框内容没有，所以自定义的“下拉”输入组件永远不会出现：

相关代码部分

制表列定义：

{
  title: "Some Col Title",
  field: "someField",
  formatter: someFieldFormatter,
  editor: "someFieldEditor" as Tabulator.Editor,
  editorParams: (cell) => {
    return { cell, zones: zonesDataTree };
  },
},

定义自定义单元格编辑器：

Tabulator.prototype.extendModule("edit", "editors", {
    someFieldEditor: (
        cell: CellComponent,
        onRendered: Function,
        success: Function,
        cancel: Function,
        editorParams: SomeFieldCellEditorParams
    ): Element => {
        const elem = document.createElement("div");

        // SomeFieldCellEditor is a React component that wraps around the same component used in 
        // the "regular form" scenario mentioned in the screenshot
        const someFieldCellEditorComponent: any = React.createElement(SomeFieldCellEditor, {
            theData: editorParams.data,
        });
        
        ReactDOM.render(someFieldCellEditorComponent, elem);
        return elem;
    },
});

Answer 1

这是因为元素包含在单元格内。

为防止表格布局损坏，制表单元格在其 CSS 上定义了overflow:hidden。

大多数下拉库都有一个选项，可让您设置应在 DOM 中附加列表的位置。您可以使用此药水将列表附加到 body 标记，这应该可以解决问题。

顺便说一句，你知道 Tabulator 内置了Select and AutoComplete Editors