在几个连续标签之后,行明智的tabindex失去焦点

Question

我有一个只有1列和大约1000行的ui-grid.每行中都有一个文本框.我想通过选项卡浏览文本框.这可以很好地工作大约10到15行,之后文本框失去焦点,然后如果再次按Tab键,它将跳过下面几行并跳转到另一个文本框.

请在此处查看问题plnkr

UI-Grid选项:

$scope.gridOptions = {
    rowHeight: '200',
    enableColumnMenus: false,
    paginationPageSize: 2000,
    columnDefs: [
      {name:"value", width:'*',
        cellTemplate: gridTemplate,
      }
    ],
    data: gridData
};

Answer 1

为什么会发生这种行为：

ui.grid有他自己的ui.grid.infiniteScroll模块，但默认情况下，由于性能损失，它不会渲染所有 1000 个项目。

如果您检查表的 DOM 结构，您会发现ui.grid仅呈现 15 个项目并在滚动时对其进行更新（滚动也会在单击选项卡时触发）。这就是为什么前 15 个项目可以在焦点位于选项卡单击的情况下正常工作的原因。

当您达到索引 16 时， ui.grid 使用新索引重新渲染 15 个项目，因此您会失去焦点。

我看到你也在github/issues上打开了这个问题，我相信ui.grid除了其他 1479 个问题之外还有这个问题:)。

从历史来看，ui.grid大约有 200 个与焦点相关的问题，看起来他们的开发人员并不急于修复它们，因为它太复杂并且可能导致回归。

所以我的结论是接受它或使用分页结构。