如何关闭SlickGrid单/多选下拉框？解决Tab键切换单元格受阻问题

方法1：监听Tab键事件手动关闭编辑器 #

通过监听Grid的键盘按下事件，在Tab键触发时主动关闭当前激活的下拉框编辑器，无需额外操作即可继续遍历单元格。

在组件代码中添加如下逻辑：

// 获取Grid实例后监听keyDown事件
this.angularGrid.slickGrid.onKeyDown.subscribe((e: KeyboardEvent) => {
  if (e.key === 'Tab') {
    const activeEditor = this.angularGrid.slickGrid.getActiveCellEditor();
    if (activeEditor) {
      // 若需保存当前选择值用commitChanges；若需取消则用cancelChanges
      activeEditor.commitChanges();
      // activeEditor.cancelChanges();
    }
  }
});

方法2：配置编辑器自动提交/关闭 #

针对下拉框编辑器（SelectEditor），可以在列定义的编辑器选项中开启commitOnBlur，当焦点离开编辑器时自动提交并关闭，配合Tab键的焦点切换实现顺畅遍历：

const columnDefinitions: Column[] = [
  {
    id: 'status',
    name: '状态',
    field: 'status',
    editor: {
      model: Editors.select,
      options: {
        commitOnBlur: true, // 焦点离开时自动提交
        collection: [{ value: '1', label: '启用' }, { value: '2', label: '禁用' }]
      }
    }
  }
];

方法3：自定义编辑器行为 #

如果上述方法不满足需求，可以自定义下拉框编辑器，重写其handleKeyDown方法，在Tab键按下时自动关闭编辑器：

export class CustomSelectEditor extends SelectEditor {
  handleKeyDown(e: KeyboardEvent) {
    if (e.key === 'Tab') {
      this.commitChanges();
      e.stopPropagation(); // 阻止默认行为后让Grid继续处理Tab遍历
    } else {
      super.handleKeyDown(e);
    }
  }
}

然后在列定义中使用自定义编辑器：

editor: {
  model: CustomSelectEditor,
  options: { /* 编辑器配置 */ }
}

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