angularjs - ui-grid 内的下拉打开问题

Question

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

这是我的 ui-grid 对象

 $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 事件以固定模式均匀触发:

• 开始单元格编辑
• afterCellEdit
• 开始单元格编辑
• afterCellEdit
• 开始单元格编辑

...

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

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

解决方法包括在添加行时生成一个假的 beginCellEdit，如您在 this updated plunkr 中所见。 .

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