tabulator.js内置select下拉编辑器响应式小屏模式无法触发问题

这是Tabulator 4.9.x版本的已知兼容问题，触发条件为Safari浏览器+响应式小屏视图，核心原因有两个：

• 内置select编辑器的触摸事件判定逻辑和Safari的点击事件冒泡规则冲突，小屏模式下会错误拦截编辑触发请求
• 下拉列表默认渲染在单元格内部，响应式重绘时Safari的堆叠上下文计算异常，会导致下拉列表被父容器遮挡，看似没有弹出

方案1：修改基础配置修复 #

在Tabulator初始化配置中新增以下参数即可覆盖默认的冲突逻辑：

var table = new Tabulator("#example-table", {
  // 原有配置保持不变
  editOnClick: true, // 强制点击/触摸都触发编辑，绕过Safari触摸事件判定bug
  editorParams: {
    renderInBody: true, // 下拉列表渲染到body下，避免被单元格父容器遮挡
  }
})

如果你的select配置了自定义选项列表，额外在editorParams中加allowEmpty: true即可。

方案2：替换为自定义select编辑器 #

如果方案1不生效，可以直接用简单的自定义select编辑器替换内置编辑器，避开版本缺陷：

// 先定义自定义select编辑器
var customSelectEditor = function(cell, onRendered, success, cancel, editorParams){
  var editor = document.createElement("select");
  // 填充选项，这里和你原来的select选项配置一致
  editorParams.values.forEach(item => {
    var option = document.createElement("option");
    option.value = item.value;
    option.innerText = item.label;
    editor.appendChild(option);
  });
  editor.value = cell.getValue();
  
  onRendered(function(){
    editor.focus();
    editor.style.width = "100%";
  });
  
  // 绑定事件
  editor.addEventListener("change", () => success(editor.value));
  editor.addEventListener("blur", () => success(editor.value));
  return editor;
}

// 列配置里把editor换成自定义的即可
{title: "你的列名", field: "your_field", editor: customSelectEditor, editorParams: {values: yourOptionList}}

方案3：版本升级 #

该缺陷在Tabulator 5.0及以上版本已经完全修复，如果你的项目可以升级依赖，直接升级到最新稳定版即可原生解决该问题，无需额外配置。

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