79643112

Date: 2025-05-28 23:25:50
Score: 2.5
Natty:
Report link

@MarzSocks not allowed to comment. I used the solution of @Vince

import { Directive, HostBinding, Input } from '@angular/core';
import { MatMenuPanel, MatMenuTrigger } from '@angular/material/menu';


@Directive({
    selector: '[matMenuTriggerForContext]',
    host: {
        'class': 'mat-mdc-menu-trigger',
        '[attr.aria-haspopup]': 'menu ? "menu" : null',
        '[attr.aria-expanded]': 'menuOpen',
        '[attr.aria-controls]': 'menuOpen ? menu.panelId : null',
        '(contextmenu)': '_handleContextMenu($event)',
      },
      exportAs: 'matMenuTriggerContext'
})
export class MatMenuTriggerForContextDirective extends MatMenuTrigger {
    @Input('matMenuTriggerForContext')
    get _matMenuTriggerForContext(): MatMenuPanel | null {
        return this.menu;
      }
    set _matMenuTriggerForContext(v: MatMenuPanel | null) {
        this.menu = v;
    }

    _handleContextMenu($event: MouseEvent): boolean {
        $event?.stopPropagation();
        $event?.preventDefault();
        $event?.stopImmediatePropagation();
        this._handleClick($event);
        return false;
    }
}

and added

/** Handles click events on the trigger. */
override _handleClick(event: MouseEvent): void {
    if (event.button !== 2) {
        return;
    }
    if (this.triggersSubmenu()) {
        // Stop event propagation to avoid closing the parent menu.
        event.stopPropagation();
        this.openMenu();
    } else {
        this.toggleMenu();
    }
}

to filter for right click (event.button == 2) This works, maybe some more changes are needed for perfectly user experience

Reasons:
  • Blacklisted phrase (1): not allowed to comment
  • Blacklisted phrase (1): to comment
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @MarzSocks
  • User mentioned (0): @Vinceand
  • Low reputation (1):
Posted by: bravehurts