Tabulator下拉选择列表无法清除选中值问题求助

Hey, I’ve encountered this exact bug with Tabulator 5.2.7’s list editor when using clearable: true—clicking that little "X" button makes the editor lose focus immediately, so you can’t actually clear the value. Here are a few solid solutions to fix this:

Option 1: Upgrade Tabulator (Easiest Fix) #

First off, this focus issue was fixed in later Tabulator versions (starting around 5.3.x). If your project allows it, upgrading to the latest stable release is the most straightforward way to resolve this—the official team already patched this bug.

Option 2: Stop Event Bubbling (Quick Fix Without Upgrade) #

If you can’t upgrade right now, you can add a listener to the clear button to stop the click event from bubbling up, which prevents the editor from losing focus. Add this after your table initialization:

quote_tracker.on("cellEditing", function(cell) {
    // Target only the OEM field's list editor
    if (cell.getField() === "oem") {
        // Wait a tiny bit to make sure the editor element is fully rendered
        setTimeout(() => {
            const clearButton = cell.getEditorElement().querySelector(".tabulator-list-clear");
            if (clearButton) {
                clearButton.addEventListener("click", function(e) {
                    // Stop the event from triggering the editor's blur logic
                    e.stopPropagation();
                    // Manually set the cell value to empty
                    cell.setValue("");
                    // Keep the editor open if you want (optional)
                    cell.edit(true);
                });
            }
        }, 100);
    }
});

Option 3: Create a Custom Clearable List Editor #

For more control, you can register a custom editor that extends the default list editor and fixes the clear button behavior:

// Register the custom editor
Tabulator.registerEditor("custom-clearable-list", {
    extend: "list",
    created: function(cell, editor) {
        // Run the default list editor's setup first
        this.parent.created(cell, editor);
        
        const clearButton = editor.querySelector(".tabulator-list-clear");
        if (clearButton) {
            clearButton.addEventListener("click", (e) => {
                e.stopPropagation();
                // Set cell value to empty
                cell.setValue("");
                // Update the editor's displayed value
                editor.value = "";
            });
        }
    }
});

// Update your column config to use the custom editor
{ 
    title: "OEM", 
    field: "oem", 
    sorter:"string",
    sorterParams:{alignEmptyValues:"bottom"},
    hozAlign: "center",
    headerHozAlign: "center",
    tooltip: true,
    headerTooltip: true,
    editable:false,
    contextMenu:cellContextMenu,
    editor:"custom-clearable-list", // Use our custom editor here
    editorParams:{values:oems,sort:"asc",clearable:true},
    cellDblClick:function(e, cell){ cell.edit(editPerms); }
}

Also, double-check your editPerms function—make sure it isn’t returning false when you click the clear button, which would force the editor to close prematurely.

内容的提问来源于stack exchange，提问作者adko