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

我在下拉菜单上获得新的一行单击并正在使用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();
    }
};

最佳答案

问题是由于these lines所致，您可以在其中看到针对屏幕阅读器的黑客攻击。

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

beginCellEdit

afterCellEdit

beginCellEdit

afterCellEdit

beginCellEdit

...

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

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

解决方法包括在添加行时引发伪造的beginCellEdit，如您在this updated plunkr中看到的那样。

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