cellNav in 3.0.0-rc.16 preventing ng-click in rowTemplate to fire.

[gregwym]

Hi Angular UI team,

ui-grid 3.0.0 being working great for us. Thanks a lot for this awesome new version.

Before rc.16, I'm using rowTemplate with ng-click in the same way as the example in http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions. It was working great with selection and cellNav plugin.

Since rc.16, when I have cellNav enabled, it is preventing the ng-click from firing. This could be introduced with the recent improvement in #2084.

Actually, what I'm trying to achieve from these plugins

• Scroll to a row (i.e., after adding a new entity)
• Allow single select when clicking on the rows, and allow multi-select when clicking on the row header checkmarks at the same time.

IMO, scrollToRow is a basic grid usage which should be an API of the grid, instead of bundled together with cellNav. Or can be a separate plugin called rowNav.

Workarounds that I have tried:

• Call gridApi.selection.selectRow() in navigate event handler instead of ng-click in template
  • The row is selected after a noticeable delay.
• Remove cellNav plugin
  • This restore ng-click so I can click and select a row even when enableRowHeaderSelection is true.
  • Loss ability to scroll to a row
• Remove evt.stopPropagation(); inside uiGridCell directive's on click even handler
  • This doesn't do anything. Prob not the cause.

I will stick with rc.15 for now.

Thanks,
Greg

[PaulL1]

@c0bra: did you come across this during the cellNav rewrite at all?

[mkefd]

I am also got confused when saw click event handler and evt.stopPropagation() in the ui.grid.cellNav.directive:uiGridCell directive.

@c0bra: Will it be possible to separate clicking and key navigation?

[chyzwar]

I have the same issue in rc-19. In row-template ng-click work-only if cellNav is not used.

[brucemackenzie]

We're seeing a similar regression moving from rc-18 to rc-19. ng-click inside a cellTemplate used to fire and now it does not.

[PaulL1]

Did you move to the new appScope instead of getExternalScope?

[brucemackenzie]

I tried that and it didn't seem to help.
Let me create a small repro to share.

[PaulL1]

No progress on a plunker for some time....assuming that this issue is resolved.

[jasonaibrahim]

This still seems to cause issues. One issue in particular is with draggable rows. The plugin ui-grid-draggable-rows relies on the drag events to rearrange the rows. It looks like on line 14850-14871 the mousedown events are being prevented, which causes the functionality of the drag and drop rows to be ceased.

I created a jsbin that shows the issue: https://jsbin.com/nomixu/3/edit?html,js,output

I have been trying to figure out all day why the row reordering hasnt been working with cellnav and this thread led me to find out that it was the preventMouseDown() function that was causing the drag and drop rows functionality to stop working.

I solved my problem by using evt.stopPropagation() instead of evt.preventDefault() near line 14867

/*
* XXX Hack for screen readers.
* This allows the grid to focus using only the screen reader cursor.
* Since the focus event doesn't include key press information we can't use it
* as our primary source of the event.
*/
$elm.on('mousedown', preventMouseDown);

//turn on and off for edit events
if (uiGridCtrl.grid.api.edit) {
    uiGridCtrl.grid.api.edit.on.beginCellEdit($scope, function () {
        $elm.off('mousedown', preventMouseDown);
    });

    uiGridCtrl.grid.api.edit.on.afterCellEdit($scope, function () {
        $elm.on('mousedown', preventMouseDown);
    });

    uiGridCtrl.grid.api.edit.on.cancelCellEdit($scope, function () {
        $elm.on('mousedown', preventMouseDown);
    });
}

function preventMouseDown(evt) {
    //Prevents the foucus event from firing if the click event is already going to fire.
    //If both events fire it will cause bouncing behavior.
    //evt.preventDefault();
    evt.stopPropagation();
}