Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

bug(Menu): fix menu panels not closing when no trigger is present #30139

Open
SeraphCoding opened this issue Dec 6, 2024 · 1 comment
Open
Labels
needs triage This issue needs to be triaged by the team

Comments

@SeraphCoding
Copy link

SeraphCoding commented Dec 6, 2024

Is this a regression?

No.

The previous version in which this bug was not present was

Unknown.

Description

MenuPanels cannot be closed when they do not have an active trigger set.
A scenario where unsetting the trigger during runtime may be wanted is when the button is meant to open a context menu or a bottom sheet depending on the size of the viewport and so needs to switch between a click handler (that opens a bottom sheet) or a matMenu Trigger that opens a menu panel during runtime. An example application has been setup for such a scenario (without the click handler, just temporarily setting the menu trigger to null during runtime)

Reproduction

StackBlitz link: https://stackblitz.com/edit/ku1ehf?file=src%2Fexample%2Fmenu-icons-example.html
Steps to reproduce:

  1. Downsize the window width until the button text says "has Trigger" (less than 600px)
  2. Hit the button
  3. The MatMenuPanel should be open now showing some dummy options - do not click anything
  4. Now upsize the window width until the button says "no Trigger" - ensure that the menu panel remains open during that time
  5. Try clicking a menu option or anywhere in the app window that would normally close the MatMenuPanel

Expected Behavior

The menu panel closes when an option is selected or anywhere within the app window outside the menu panel is clicked.

Actual Behavior

When the trigger to open the menu is lost - the menu panel can no longer close until it regains a trigger.

Environment

  • Angular: 19.0.1
  • CDK/Material: 19.0.1
  • Browser(s): Chromium
  • Operating System (e.g. Windows, macOS, Ubuntu): Unrelated.
@SeraphCoding SeraphCoding added the needs triage This issue needs to be triaged by the team label Dec 6, 2024
@SeraphCoding
Copy link
Author

SeraphCoding commented Dec 13, 2024

Additionally - it seems that when mat-menu-items are projected into a MatMenuPanel via ng-content - tabbing into a mat menu item makes them lose focus, but that is a separate issue it seems.

Please re-open: #14874
It is still an issue @crisbeto

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Development

No branches or pull requests

1 participant