Skip to content

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

@srnec

Description

@srnec

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

Activity

rockstarsmaf

rockstarsmaf commented on Jul 11, 2024

@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

srnec commented on Jul 12, 2024

@srnec
Author

@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.

added
P4A relatively minor issue that is not relevant to core functions
and removed
needs triageThis issue needs to be triaged by the team
on Jul 12, 2024
lindoRR-07

lindoRR-07 commented on Jul 31, 2024

@lindoRR-07
Contributor

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: cdk/menu

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @crisbeto@srnec@rockstarsmaf@lindoRR-07

        Issue actions

          bug(cdkMenu): Menu closes unexpectedly after button is clicked and it is destroyed or made disabled · Issue #29420 · angular/components