-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
In a place where we define a matMenu, and allow it to be open via a button (matMenuTriggerFor), and then the entire element also works as a context trigger matContextMenuTriggerFor, it get's a little strange that the behaviours do not align.
The context menu cannot have a backdrop, as far as I can tell, because of a intentional implementation, but still closes when click outside. matMenuTriggerFor follows the hasBackdrop setting on the matMenu element, but if you don't have a backdrop, will not automatically close when you click outside.
I can undestand that the default behaviour of matContextMenuTriggerFor should be to not have a backdrop, and close when you click elesewhere, but the fact that the hasBackdrop configuration is on the matMenu element itself, makes it counter-intuitive. There is a setting that the documentation states will decide if the menu has a backdrop, but if it's opened via context menu, that config is ignored.
I suggest that:
matContextMenuTriggerForallows backdrop, but in cases where the setting is not defined, uses no backdrop as a default.matMenuTriggerForadopts the same "click outside" to close, even when there's no backdrop.
Reproduction
StackBlitz link: https://stackblitz.com/edit/context-menu-backdrop?file=src%2Fmain.ts
Steps to reproduce:
- Clicking the button opens as a menu (with backdrop)
- Rightclicking the context hook opens as a context menu (without backdrop)
Expected Behavior
matContextMenuTriggerForopens without backdrop, regardless ofmatMenu.hasBackdropsetting.matMenuTriggerFordoes not close on click outside when opened without a backdrop
Actual Behavior
matContextMenuTriggerForopens without backdrop by default, but can have backdrop ifmat-menuhashasBackdrop.matMenuTriggerForsupports closing when click outside (probably opt-in behaviour to avoid breakages)
Environment
- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):