Tabulator下拉框在平板/移动端点击后立即消失问题求助

平板上Tabulator下拉框点击后会和虚拟键盘一同弹出随即消失，核心原因是系统触发了虚拟键盘的自动开合逻辑，干扰了下拉组件的状态。以下是直接有效的解决方案：

1. 自定义Select编辑器，阻止自动聚焦触发键盘 #

Tabulator默认的select编辑器激活时会自动聚焦输入框，平板系统会因此弹出虚拟键盘。通过自定义初始化逻辑，禁用自动聚焦行为：

{
  title: "下拉选项",
  field: "options",
  editor: "select",
  editorParams: {
    values: ["选项1", "选项2", "选项3"],
    initialize: function(cell, onRendered, success, cancel, editorParams) {
      const selectEl = document.createElement("select");
      // 填充下拉选项
      Object.entries(editorParams.values).forEach(([key, val]) => {
        const option = document.createElement("option");
        option.value = key;
        option.textContent = val;
        selectEl.appendChild(option);
      });
      selectEl.value = cell.getValue();

      // 阻止自动聚焦，避免触发虚拟键盘
      selectEl.addEventListener("focus", (e) => {
        if (!e.isTrusted) return;
        e.preventDefault();
        setTimeout(() => selectEl.blur(), 0);
      });

      // 选择完成后提交值
      selectEl.addEventListener("change", () => success(selectEl.value));

      // 点击下拉框时手动处理，保持展开状态
      selectEl.addEventListener("mousedown", (e) => {
        e.stopPropagation();
        selectEl.focus();
      });

      return selectEl;
    }
  }
}

2. 全局监听触摸事件，拦截键盘弹出行为 #

针对Tabulator的下拉组件，拦截触摸事件的默认行为，不让系统自动弹出虚拟键盘：

document.addEventListener("touchstart", (e) => {
  if (e.target.closest(".tabulator-editor-select")) {
    e.preventDefault();
    const selectEl = e.target.closest("select");
    selectEl?.showPicker(); // 手动触发下拉框展开
  }
}, { passive: false });

3. 全局禁用Tabulator编辑器自动聚焦 #

在Tabulator实例配置中直接关闭编辑器自动聚焦的开关，从根源避免触发虚拟键盘：

new Tabulator("#your-table-id", {
  // 其他表格配置...
  editorFocus: false, // 禁止编辑器自动获取焦点
  cellEdited: function(cell) {
    cell.getElement().blur(); // 编辑完成后手动失焦
  }
});

验证要点 #

• 平板端测试：点击下拉框确认虚拟键盘不再弹出，下拉框保持展开直到用户选择选项或点击其他区域
• PC端验证：确保原有交互逻辑不受影响

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