ui-grid 内的下拉打开问题

Question

我在下拉菜单中获得了一个新行，我正在使用 enableCellEditOnFocus，当我尝试打开下拉菜单时，它没有打开，备用下拉菜单工作正常。为了避免混淆，我更改了代码，并显示了给我错误的那段代码，这里是 my plunker.

这是我的 ui-网格对象

 $scope.gridOptions = {
enableCellEditOnFocus: true 
};
  $scope.gridOptions.columnDefs = [
{ name: 'gender', displayName: 'Gender', editableCellTemplate: 'ui-grid/dropdownEditor', width: '20%', 
   editDropdownValueLabel: 'gender', editDropdownOptionsArray: [
  { id: 1, gender: 'male' }, 
  { id: 2, gender: 'female' } 
] }  ];   

我使用此代码添加新行：

$scope.addNewRow = function () {
    $scope.gridOptions.data.push({
    "gender": "male"});
};
//adding new row inside of uigrid
$scope.newRow = function (row, columnIndex) {
    tempIndexSave = "";
    tempIndexSave = _.indexOf($scope.gridOptions.data, row);
    var length = $scope.gridOptions.data.length;
    if (length - 1 == tempIndexSave) {
        $scope.addNewRow();
    }
};

Answer 1

问题是由于 these lines 您可以看到屏幕阅读器有一个 hack。

此 hack 可能会带来与您的类似的问题，因为它依赖于 beginCellEdit 和 afterCellEdit 事件以固定模式均匀触发：

• beginCellEdit
• afterCellEdit
• beginCellEdit
• afterCellEdit
• beginCellEdit

...

在已编辑行的同时添加新行会打破此模式，因为对于新创建的行，您缺少 beginCellEdit，因此 preventMouseDown 函数将始终触发，从而阻止用户交互。

我提出了一个解决方法，但如果您想保持与屏幕阅读器的兼容性，我不建议您使用它（请参阅我链接到的文件中各行之前的注释），因为该解决方法可能会破坏黑客攻击.

解决方法包括在添加行时生成假 beginCellEdit，如您在 this updated plunkr.

中所见

...
if (length - 1 == tempIndexSave) {
  $scope.addNewRow();
  $scope.gridApi.edit.raise.beginCellEdit();
}
...