bug(cdkMenu): Menu closes unexpectedly after button is clicked and it is destroyed or made disabled

[srnec]

trafficstars

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

My goal is to implement a button that opens a menu. On this menu there are static elements (texts) and some button. When button is clicked then button is removed from the DOM (or disabled).

This cannot be implemented using cdkMenuTriggerFor and cdkMenu because cdkMenu is closed automatically.

Reproduction

StackBlitz link: https://stackblitz.com/edit/pbb6fn Steps to reproduce:

1. click on "Click me" to open the menu
2. click on "Refresh" item

PS: Notice that buttons don't have cdkMenuItem directive applied on purpose.

Expected Behavior

Have ability to stop closing of the menu when button is disabled or button is destroyed (removed from the DOM) after button click.

Actual Behavior

Menu is closed due to lost focus on the clicked button (I guess). Same problem occurs if on item click we destroy the button (e.g. using ngIf="!btnDisabled")

Environment

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

[rockstarsmaf]

@srnec Hi, could you explain this in a better way? Like inside the menu once you have clicked it you want that particular button to be either disabled or removed from dom? As in if I click on refresh button then that is disabled right and if I click on the other button then both of them are disabled. And while you do this, the menu should not close?

[srnec]

@rockstarsmaf I updated the stackblitz reproduction repo.

Problem or an issue I have is when I click on "Refresh" menu item. When you click on it it will change the flag that changes button's disabled state to true. When this happens the menu automatically closes. If you click on the "Another item" menu item it will not close the menu (because on click I am not changing the button's disabled state nor removing it from DOM).

Problem or reason why this happens will be related to the focus handling on the cdkMenu. It seems by disabling button on which I clicked (or removing it from DOM) will change the focus which in in the end triggers logic to close the menu. This is not really clear for me why it happens because there should be some way to forbid any automatic closing.

[lindoRR-07]

@srnec currently working on resolving this bug, quick question, in your functionality how is the pop-up ideally closed, and why not opt for using the inline menu?