-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Open
Labels
P4A relatively minor issue that is not relevant to core functionsA relatively minor issue that is not relevant to core functionsarea: cdk/menu
Description
Is this a regression?
- Yes, this behavior used to work in the previous versionTo pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
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:
- click on "Click me" to open the menu
- 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
matheus-okamoto-unvoid
Metadata
Metadata
Assignees
Labels
P4A relatively minor issue that is not relevant to core functionsA relatively minor issue that is not relevant to core functionsarea: cdk/menu
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
rockstarsmaf commentedon Jul 11, 2024
@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 commentedon Jul 12, 2024
@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 commentedon Jul 31, 2024
@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?
md-menu
tour step closes on button focus hakimio/ngx-ui-tour#189