Contextmenu is broken in Angular 13

[elementalPRESS]

Contextmenu is broken in Angular 13

[elementalPRESS]

Ok, I found a fix which seems to work. But to be honest, I have no idea if this covers all issues - for me it is working

In file contextMenu.service.tssearch for first occurrence of (line 82):

const positionStrategy = this.overlay.position().connectedTo( ... )

Replace with:

const positionStrategy = this.overlay
	.position()
	.flexibleConnectedTo(new ElementRef(anchorElement || this.fakeElement))
	.withPositions([
		{
			originX: 'start',
			originY: 'top',
			overlayX: 'start',
			overlayY: 'top',
		},
		{
			originX: 'start',
			originY: 'top',
			overlayX: 'start',
			overlayY: 'bottom',
		},
		{
			originX: 'end',
			originY: 'top',
			overlayX: 'start',
			overlayY: 'top',
		},
		{
			originX: 'start',
			originY: 'top',
			overlayX: 'end',
			overlayY: 'top',
		},
		{
			originX: 'end',
			originY: 'center',
			overlayX: 'start',
			overlayY: 'center',
		},
		{
			originX: 'end',
			originY: 'center',
			overlayX: 'start',
			overlayY: 'center',
		},
		{
			originX: 'start',
			originY: 'center',
			overlayX: 'end',
			overlayY: 'center',
		},
	])
	.withFlexibleDimensions(false);

In file contextMenu.service.tssearch for first occurrence of (line 109):

const positionStrategy = this.overlay.position().connectedTo( ... )

Replace with:

  const positionStrategy = this.overlay
    .position()
    .flexibleConnectedTo(new ElementRef(anchorElement || this.fakeElement))
    .withPositions([
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'end',
        overlayY: 'top',
      },
      {
        originX: 'end',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'bottom',
      },
      {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'end',
        overlayY: 'bottom',
      },
    ])
    .withFlexibleDimensions(false)

Doing so the context menu will work with Angular 13, too. Nevertheless, I would be grateful if the developer would provide an official fix, because I'm not sure if this fix really covers all aspects of CDK API changes.

Another issue in Angular 13:

I'm using two different context menus on one page but in different components. In the past I did in each component

// template
<context-menu>
	...
</context-menu>

// component
@ViewChild(ContextMenuComponent, { static: true }) public basicContextMenu: ContextMenuComponent;

...and this was working well. With Angular 13 you have to give each context menu an unique name, like

<context-menu #basicDrawingContextMenu>
	...
</context-menu>

and in the component:

@ViewChild('basicDrawingContextMenu') public basicContextMenu: ContextMenuComponent;

If not doing this - the second context menu will not contain any elements.

Hope that the code fragments here will help some people to update to Angular 13

[MichalK6677]

I temporarily implemented fix from @elementalPRESS this way:

contextMenu.service.ts

import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { ElementRef, Injectable } from '@angular/core';
import { ContextMenuService, IContextMenuContext } from 'ngx-contextmenu';

@Injectable({
    providedIn: 'root'
})`
export class ContextMenuFixService extends ContextMenuService {
    constructor(
        private overlayFix: Overlay,
        private scrollStrategyFix: ScrollStrategyOptions,
    ) {
        super(overlayFix, scrollStrategyFix);
    }

    public openContextMenu(context: IContextMenuContext) {
        const { anchorElement, event, parentContextMenu } = context;

        if (!parentContextMenu) {
            const mouseEvent = event as MouseEvent;
            this['fakeElement'].getBoundingClientRect = (): DOMRect => ({
                bottom: mouseEvent.clientY,
                height: 0,
                left: mouseEvent.clientX,
                right: mouseEvent.clientX,
                top: mouseEvent.clientY,
                width: 0,
            } as DOMRect);
            this.closeAllContextMenus({ eventType: 'cancel', event });
            const positionStrategy = this.overlayFix
                .position()
                .flexibleConnectedTo(new ElementRef(anchorElement || this['fakeElement']))
                .withPositions([
                    {
                        originX: 'start',
                        originY: 'top',
                        overlayX: 'start',
                        overlayY: 'top',
                    },
                    {
                        originX: 'start',
                        originY: 'top',
                        overlayX: 'start',
                        overlayY: 'bottom',
                    },
                    {
                        originX: 'end',
                        originY: 'top',
                        overlayX: 'start',
                        overlayY: 'top',
                    },
                    {
                        originX: 'start',
                        originY: 'top',
                        overlayX: 'end',
                        overlayY: 'top',
                    },
                    {
                        originX: 'end',
                        originY: 'center',
                        overlayX: 'start',
                        overlayY: 'center',
                    },
                    {
                        originX: 'end',
                        originY: 'center',
                        overlayX: 'start',
                        overlayY: 'center',
                    },
                    {
                        originX: 'start',
                        originY: 'center',
                        overlayX: 'end',
                        overlayY: 'center',
                    },
                ])
                .withFlexibleDimensions(false);
            this['overlays'] = [this.overlayFix.create({
                positionStrategy,
                panelClass: 'ngx-contextmenu',
                scrollStrategy: this.scrollStrategyFix.close(),
            })];
            this.attachContextMenu(this['overlays'][0], context);
        } else {
            const positionStrategy = this.overlayFix
                .position()
                .flexibleConnectedTo(new ElementRef(anchorElement || this['fakeElement']))
                .withPositions([
                    {
                        originX: 'start',
                        originY: 'top',
                        overlayX: 'end',
                        overlayY: 'top',
                    },
                    {
                        originX: 'end',
                        originY: 'bottom',
                        overlayX: 'start',
                        overlayY: 'bottom',
                    },
                    {
                        originX: 'start',
                        originY: 'bottom',
                        overlayX: 'end',
                        overlayY: 'bottom',
                    },
                ])
                .withFlexibleDimensions(false)
            const newOverlay = this.overlayFix.create({
                positionStrategy,
                panelClass: 'ngx-contextmenu',
                scrollStrategy: this.scrollStrategyFix.close(),
            });
            this.destroySubMenus(parentContextMenu);
            this['overlays'] = this['overlays'].concat(newOverlay);
            this.attachContextMenu(newOverlay, context);
        }
    }
}

app.module.ts

providers: [
        ...,
        {
            provide: ContextMenuService,
            useExisting: ContextMenuFixService
        }
]

[sroucheray]

For those in need of Angular 13 support, I forked the project here https://github.com/PerfectMemory/ngx-contextmenu/ and published updated versions here https://www.npmjs.com/package/@perfectmemory/ngx-contextmenu

I did it because obviously, @isaacplmann, the maintainer is not willing to keep up with Angular versions. It is his strictest right. I take this opportunity to thank him warmly for his work that I have used for several years.

To get a drop in replacement of the [email protected] (Angular 12)

npm install @perfectmemory/[email protected]

this is mainly the same code base as this one, apart from the package name and some cosmetic and config file changes.

To get Angular 13 support

npm install @perfectmemory/ngx-contextmenu@^7.0.0

This is an updated version and the API has not changed.

Both versions are still alpha because they are barely tested. Not much work have been done on top of @isaacplmann 's.

Both versions are now tested with increasing code coverage.

[MaximeKoitsalu]

I think this project has been abandoned by the maintainer, maybe some brave soul would dare fork this project and maintain it by themself?

[mrjohnr]

great

remove "ngx-contextmenu": "6.0.0",  
add @perfectmemory/ngx-contextmenu": "7.0.0-alpha.1"
use new import:  import { ContextMenuModule, ContextMenuService } from '@perfectmemory/ngx-contextmenu';
add in syled.css   @import '@angular/cdk/overlay-prebuilt.css';

is woking,thanks

[56789a1987]

@MichalK6677 the fix has issues. The menu position is incorrect for submenus or using with anchorElement.
Made some fix by referring to the original source code.

contextMenu.service.ts

import { Overlay, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { ElementRef, Injectable } from '@angular/core';
import { ContextMenuService, IContextMenuContext } from 'ngx-contextmenu';

@Injectable({
	providedIn: 'root'
})
export class ContextMenuFixService extends ContextMenuService {
	constructor(private overlayFix: Overlay, private scrollStrategyFix: ScrollStrategyOptions) {
		super(overlayFix, scrollStrategyFix);
	}

	public openContextMenu(context: IContextMenuContext) {
		const { anchorElement, event, parentContextMenu } = context;

		if (!parentContextMenu) {
			const mouseEvent = event as MouseEvent;
			this['fakeElement'].getBoundingClientRect = (): DOMRect => ({
				bottom: mouseEvent.clientY,
				height: 0,
				left: mouseEvent.clientX,
				right: mouseEvent.clientX,
				top: mouseEvent.clientY,
				width: 0,
			} as DOMRect);
			this.closeAllContextMenus({ eventType: 'cancel', event });
			const positionStrategy = this.overlayFix
				.position()
				.flexibleConnectedTo(new ElementRef(anchorElement || this['fakeElement']))
				.withPositions([
					{
						originX: 'start', originY: 'bottom',
						overlayX: 'start', overlayY: 'top',
					},
					{
						originX: 'start', originY: 'top',
						overlayX: 'start', overlayY: 'bottom',
					},
					{
						originX: 'end', originY: 'top',
						overlayX: 'start', overlayY: 'top',
					},
					{
						originX: 'start', originY: 'top',
						overlayX: 'end', overlayY: 'top',
					},
					{
						originX: 'end', originY: 'center',
						overlayX: 'start', overlayY: 'center',
					},
					{
						originX: 'start', originY: 'center',
						overlayX: 'end', overlayY: 'center',
					},
				])
				.withFlexibleDimensions(false);
			this['overlays'] = [this.overlayFix.create({
				positionStrategy,
				panelClass: 'ngx-contextmenu',
				scrollStrategy: this.scrollStrategyFix.close(),
			})];
			this.attachContextMenu(this['overlays'][0], context);
		} else {
			const positionStrategy = this.overlayFix
				.position()
				.flexibleConnectedTo(new ElementRef(event ? event.target : anchorElement))
				.withPositions([
					{
						originX: 'end', originY: 'top',
						overlayX: 'start', overlayY: 'top',
					},
					{
						originX: 'start', originY: 'top',
						overlayX: 'end', overlayY: 'top',
					},
					{
						originX: 'end', originY: 'bottom',
						overlayX: 'start', overlayY: 'bottom',
					},
					{
						originX: 'start', originY: 'bottom',
						overlayX: 'end', overlayY: 'bottom',
					},
				])
				.withFlexibleDimensions(false);
			const newOverlay = this.overlayFix.create({
				positionStrategy,
				panelClass: 'ngx-contextmenu',
				scrollStrategy: this.scrollStrategyFix.close(),
			});
			this.destroySubMenus(parentContextMenu);
			this['overlays'] = this['overlays'].concat(newOverlay);
			this.attachContextMenu(newOverlay, context);
		}
	}
}

[mrjohnr]

same here.not working for angular 13,waiting for a fix

[Cosangeles33]

I'm really looking forward to the fix ( @sroucheray

[sroucheray]

I'm really looking forward to the fix ( @sroucheray

Sorry but I am not the maintainer

[RGerhardt-Pressmind]

When is this change finally coming to the live repo? You can't upgrade to Angular 13 and unfortunately you have to wait.

[eran10]

any update here ? we also can't upgrade to Angular 13...
any chance to push a fix @isaacplmann ?

[mrjohnr]

@hoeni: how to update to your commit? npm shows no new version

[hoeni]

@hoeni: how to update to your commit? npm shows no new version

You should not. I was just experimenting...

[mrjohnr]

Has anyone successfully using this component on Angular 13?

[RGerhardt-Pressmind]

Has anyone successfully using this component on Angular 13?

Yes, ist work in Angular 13 with the bugfix from @56789a1987

[mrjohnr]

so how to make it works,any steps?
thanks

Has anyone successfully using this component on Angular 13?

Yes, ist work in Angular 13 with the bugfix from @56789a1987