Issue with IgxDialog and context menu

[Timmeeeey]

When you click inside a IgxDialog stopPropagation() is called on the event.

<div tabindex="0" #dialog class="igx-dialog" (click)="onDialogSelected($event)">

public onDialogSelected(event) {
    event.stopPropagation();
    //...
}

I use PerfectMemory/ngx-contextmenu for a context menu which uses @HostListener('document:click', ['$event']) to close the context menu on outside click.
But because of the event.stopPropagation() the context menu doesn't close when I click anywhere inside a dialog.

Is the stopPropagation() really necessary here?

[georgianastasov]

Hello @Timmeeeey,

I have been looking into your question and yes the stopPropagation() is necessary. This implementation is made in relation to scenarios with nested igx-dialog components. This is because when we have nested igx-dialog components and a click is made outside the inner igx-dialog, only it should close, and the parent dialog should remain open as this is related to this issue.

However, with this implementation, event propagation is always stopped at the moment. That leads to the impossibility of closing some components inside the dialog, such as context menus as your described scenario, because after opening a context menu in the igx-dialog component, when clicking outside the context menu but inside the igx-dialog component, it cannot close because stopPropagation is called.

I have logged this behavior in our GitHub repository, and you can view the issue here. Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team.

In order to receive a notification whenever new information is available, please make sure that you are subscribed to the issue. This can be achieved via “Subscribe” button.

Thank you for your cooperation.