angular / angular/components

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

Offen
#29,420 3 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/menu P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verlinkten StackBlitz-Reproduktion und verfolge das Fokusverhalten des CDK-Menüs, nachdem auf die Schaltfläche Refresh geklickt wurde. Überprüfe den Fall, in dem die Schaltfläche deaktiviert oder aus dem DOM entfernt wird, und bestätige anschließend, dass das Menü geöffnet bleibt, ohne cdkMenuItem auf die Schaltfläche anzuwenden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.