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

Question

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

查看问题plnkr here

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上也打开了这个问题，除了1479个人之外我还相信它的ui.grid错误:)。

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

所以我的结论只是与它一起生活或使用分页结构。

Answer 2

无论@Maxim提到的是绝对正确的。要摆脱这个问题， 你可以做的解决方法是设置virtualThreshold = 50而不是使用分页，这样就不会丢失重点。

Answer 3

你可以通过捕捉TAB键按下事件来破解它，并覆盖默认行为。

每个文本框都会监听按键事件，将焦点传递给下一个文本框。

以下an example可以提供帮助。

然而，1000个输入听起来像一个糟糕的用户体验，可能会有糟糕的表现。