Disable closing the context menu when selecting an item

[amir-alic]

I want to prevent closing the dialog when selecting an item (by mouse click or keyboard) => the execute event.

The "passive" parameter is not suitable because it also:

• prevents execute events (can be circumvented by custom click event)
• I lose keyboard navigation (have no solution for this)
• The styling when hovering over is also then not active

Is this possible?

[isaacplmann]

I can't think of a way to do this. And I'm curious why you want to.

[amir-alic]

I am implementing grid's column selection via context menu => right click on grid's header.

So I have e.g. 10 items with check-boxes which determine if a column should be displayed/hidden.

After every selection, the context menu is closed.

In this case it is not practical/user-friendly.

If it is not possible in current version, any possibility to implement it in a future version?

[isaacplmann]

Thanks for the description. I have some ideas how you can do it. I just want to verify before giving you a solution.

[isaacplmann]

Nevermind. My solution works for clicking, but not for keyboard navigation. You can basically put (click)="$event.stopPropagation()" on the checkbox to prevent the click from closing the menu, but keyboard navigation will still execute the context menu item and close the whole context menu.

Yes, this would be a good feature to add in the future. Want to work with me to write a PR?

[amir-alic]

Ok, then please fire away with the solution :)

I tried with

event.preventDefault();
event.stopPropagation();

on item's execute event and also on context-menu's close event but it makes no difference.

[isaacplmann]

Put it on the (click) event on the checkbox itself. Like this:

<ng-template contextMenuItem (execute)="showMessage('Hi, someone')">
  Say hi <input type="checkbox" (click)="$event.stopPropagation()">
</ng-template>

[amir-alic]

html:

<ng-template *ngFor="let col of columns" contextMenuItem let-item>
            <div (click)="customClick(col, $event)" style="background: red;">
                <input type="checkbox" [checked]="col.visible" /> {{ col.name }}</div>
        </ng-template>

typescript:

customClick(col, ev) {   
        ev.preventDefault();
        ev.stopPropagation();
        //  .. my logic
    }

I tried it like this and the context-menu does not close for this entire div. (checkbox and text, colored red for debugging)

But if i click outside of this div (padding or margin of context-item) the context-menu is closed.

Also the keyboard navigation closes the context-menu.

Unfortunately in the end, not a good solution.

[isaacplmann]

I agree. A better solution would be to give the execute event a way to be cancelled. But that would require a PR to the library.

[amir-alic]

Yes, that would be the right solution.

If I catch some free time in the coming days I'll try to implement a PR.

[isaacplmann]

Great. Before you start coding the PR, open an issue and layout your general plan so that I can give feedback. I always appreciate help.