Contextmenu is broken in Angular 13 #242

elementalTIMING · 2021-11-04T21:33:59Z

The contextmenu doesn't open anymore on right click. The error message:

´this.overlay.position(...).connectedTo is not a function´

comes up. Does anybody how to fix this?

Thx and best regards,
Lars

elementalTIMING · 2021-11-05T07:02:36Z

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

mrjohnr · 2021-11-11T11:18:52Z

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

Cosangeles33 · 2021-11-21T02:12:41Z

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

MichalK6677 · 2021-11-22T08:33:37Z

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 · 2021-11-22T08:34:03Z

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

Sorry but I am not the maintainer

RGerhardt-Pressmind · 2021-12-07T13:03:46Z

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

56789a1987 · 2021-12-19T14:38:33Z

@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);
		}
	}
}

eran10 · 2021-12-26T14:38:45Z

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

MaximeKoitsalu · 2022-01-04T07:42:41Z

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 · 2022-01-18T08:08:16Z

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

hoeni · 2022-01-18T08:10:21Z

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

You should not. I was just experimenting...

mrjohnr · 2022-01-20T12:55:33Z

Has anyone successfully using this component on Angular 13?

RGerhardt-Pressmind · 2022-01-20T12:59:21Z

Has anyone successfully using this component on Angular 13?

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

mrjohnr · 2022-01-20T14:53:32Z

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

sroucheray · 2022-01-20T19:34:39Z

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.

mrjohnr · 2022-01-21T12:17:36Z

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

hoeni pushed a commit to hoeni/ngx-contextmenu that referenced this issue Jan 13, 2022

apply quickfix for NG13 from isaacplmann#242 (comment)

7fbd0d1

ert78gb mentioned this issue Aug 20, 2022

fix: use @perfectmemory/ngx-contextmenu instead of ngx-contextmenu UltimateHackingKeyboard/agent#1825

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Contextmenu is broken in Angular 13 #242

Contextmenu is broken in Angular 13 #242

elementalTIMING commented Nov 4, 2021

elementalTIMING commented Nov 5, 2021

mrjohnr commented Nov 11, 2021

Cosangeles33 commented Nov 21, 2021

MichalK6677 commented Nov 22, 2021

sroucheray commented Nov 22, 2021 •

edited

Loading

RGerhardt-Pressmind commented Dec 7, 2021

56789a1987 commented Dec 19, 2021

eran10 commented Dec 26, 2021 •

edited

Loading

MaximeKoitsalu commented Jan 4, 2022

mrjohnr commented Jan 18, 2022

hoeni commented Jan 18, 2022

mrjohnr commented Jan 20, 2022

RGerhardt-Pressmind commented Jan 20, 2022

mrjohnr commented Jan 20, 2022

sroucheray commented Jan 20, 2022 •

edited

Loading

mrjohnr commented Jan 21, 2022 •

edited

Loading

Contextmenu is broken in Angular 13 #242

Contextmenu is broken in Angular 13 #242

Comments

elementalTIMING commented Nov 4, 2021

elementalTIMING commented Nov 5, 2021

mrjohnr commented Nov 11, 2021

Cosangeles33 commented Nov 21, 2021

MichalK6677 commented Nov 22, 2021

sroucheray commented Nov 22, 2021 • edited Loading

RGerhardt-Pressmind commented Dec 7, 2021

56789a1987 commented Dec 19, 2021

eran10 commented Dec 26, 2021 • edited Loading

MaximeKoitsalu commented Jan 4, 2022

mrjohnr commented Jan 18, 2022

hoeni commented Jan 18, 2022

mrjohnr commented Jan 20, 2022

RGerhardt-Pressmind commented Jan 20, 2022

mrjohnr commented Jan 20, 2022

sroucheray commented Jan 20, 2022 • edited Loading

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

To get Angular 13 support

mrjohnr commented Jan 21, 2022 • edited Loading

sroucheray commented Nov 22, 2021 •

edited

Loading

eran10 commented Dec 26, 2021 •

edited

Loading

sroucheray commented Jan 20, 2022 •

edited

Loading

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

mrjohnr commented Jan 21, 2022 •

edited

Loading