ContextMenu tied to DataTable always opens no matter where you right click on the page

[fis-dan-wnuk]

Table definition:

`<p-contextMenu #cm [model]="items" [global]="false">

    <p-dataTable *ngIf="menu" #table [value]="entries" [sortMode]="multiple" [rows]="10" [paginator]="true" [responsive]="true" [selectionMode]="getSelectionMode()"
                 (selection)="getSelection()" [contextMenu]="cm" (onContextMenuSelect)="onContextSelect($event)" (onRowClick)="onClick($event)">
        <p-column *ngIf="select" styleClass="checkbox-column">
            <template let-entry="rowData">
                <input type="checkbox" (click)="onCheckboxClick($event, entry)" [checked]="isEntrySelected(entry)" />
            </template>
        </p-column>
        <p-column *ngFor="let column of columns" [field]="column.value" [header]="column.label" [sortable]="true" [filter]="true">
            <template let-entry="rowData">
                {{getColumnValue(entry, column)}}
            </template>
        </p-column>
    </p-dataTable>`

I see the following in the ContextMenu ngAfterViewInit lifecycle method:

this.documentRightClickListener = this.renderer.listenGlobal('body', 'contextmenu', (event) => { this.show(event); event.preventDefault(); });

This seems to be registering any context menu created to always show when the body is rightclicked. Maybe when a datatable registers a context menu it can call a method that unregisters this listener? Or if global flag isn't set it doesn't create this listener at all?

[fis-dan-wnuk]

On another note - the two event listeners in ContextMenu are listening on the body. Can they be changed to instead listen on the document? The reason I ask is because the application I am working on has the body centered with margin: 0 auto;. Clicking on the margin doesn't trigger a click event on the body - so essentially half the page does not cancel the right click menu.

[fis-dan-wnuk]

The displaying of context menu regardless of where the right click occurs also means that when you right click on a table when there are multiple tables on the page with context menus, then one context menu is displayed for each table.

[caseylutz]

It would appear to me (after looking at the source) that the context menu appears to be only half-implemented at this time. Any updates on the status of this module? Conceptually I feel like the context-menu control should only really bind the context menu event to the parent component hosting the context menu control and then listen on the body/document for click events to dismiss the menu.

It would also be extremely helpful if an edge case could be taken into account wherein context menu controls are declared in nested components. The bottom-most component should take precedence and open up the context menu.

Example:

• Parent Component (Contains a context menu)
• - ngFor
• - - Child Component (Also contains a context menu)

When the Parent Component is right-clicked outside of any of its child components, show the parent's context menu. When a child component specifically is right-clicked, show the child's context menu.