angular / angular/components

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

Ouverte
#29,420 3 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

area: cdk/menu P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par la reproduction StackBlitz liée et suivez le comportement du focus du menu CDK après avoir cliqué sur le bouton Refresh. Vérifiez le cas où le bouton est désactivé ou supprimé du DOM, puis confirmez que le menu reste ouvert sans appliquer cdkMenuItem au bouton.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.