bug(CdkMenuTriggerFor): CdkMenuTrigger doesn't work correctly with Angular without Zone

[Man Nguyen]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I am trying to convert my app to a Zoneless Angular application. Since converting the application to zoneless, some Angular CDK features don't work as I expected.

I fixed the OverlayRef by calling updatePosition and it works well but I can't find out how to fix the CdkMenuTriggerFor. When I open the menu, the menu list items appear at the top-left (doesn't stick to the cdkMenuTriggerFor). My code is below

<div [cdkMenuTriggerFor]="menu" class="flex items-center cursor-pointer">
  <img
    src="assets/images/default-ava.png"
    alt="Default Avatar"
    class="desktop:w-12 desktop:h-12 mobile:w-8 mobile:h-8 mr-2"
  />
</div>
<ng-template #menu>
  <app-menu cdkMenu>
    <app-menu-item cdkMenuItem class="mobile:block desktop:hidden">{{ userDetails()?.name }}</app-menu-item>
    <app-menu-item cdkMenuItem (click)="viewProfile()">Profile</app-menu-item>
    <app-menu-item cdkMenuItem (click)="logout()">Log out</app-menu-item>
  </app-menu>
</ng-template>

Reproduction

GitHub repository: https://github.com/manng2/angular-zoneless-bug-reproduce

Angular with Zone

Angular without Zone

Expected Behavior

The menu list should be attached to a parent element like Angular with Zone

Actual Behavior

The menu list appears at the top-left (don't attach to the parent element)

Environment

• Angular: 17.0.0
• CDK/Material: 17.0.0
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[Kristiyan Kostadinov]

There have been a lot of zoneless fixes after v17. Can you try updating to one of the v18 next versions?

[Kristiyan Kostadinov]

Closing since there hasn't been any response since the previous comment.