Tabulator - custom cell editor not fully opened

Question

The requirement is to have 'inline editing' of some cell in Tabulator based table. The cell requires a custom editor since the input is a custom component (which is already used in another form, outside of Tabulator).

Our environment is React + Tabulator (v4.7) + BlueprintJS as the components library.

The problem is that the component won't fully open as a custom editor in Tabulator, while working fine outside of Tabulator, in a regular form.

Why the component won't fully open?

The custom component serving as the 'editor' for this cell is using Blueprint (BP) 'popover' so it has a popover target and a content. This is how it looks like in a form edit:

The problem is that upon clicking, the popover target is being rendered but the popover content is not, so the custom 'dropdown' input component is never appearing:

Relevant code sections

Tabulator column definition:

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

Defining custom cell editor:

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

This is happening because the element is contained inside of the cell.

To prevent corruption of the table layout, tabulator cells have overflow:hidden defined on their CSS.

Most dropdown libraries have a an option that lets you set where in the DOM the list should be appended. You can use this potion to append the list to the body tag which should resolve the issue.

On a side note, did you know that Tabulator comes with built in Select and AutoComplete Editors