bug(cdk overlay): open/close overlay behavior

[AnkitaSood]

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

The cdkoverlay doesn't close on click of the trigger button after it has been opened, if both (overlayOutsideClick)="isOpen=false" is added to the overlay template and (click)="isOpen = !isOpen" is added to the trigger button.

Reproduction

StackBlitz link: https://stackblitz.com/edit/nxazcw?file=src%2Fexample%2Fcdk-overlay-basic-example.html Steps to reproduce:

1. Click on a button to open the overlay.
2. Click anywhere outside of the overlay, notice the overlay closes.
3. Click on a button to open the overlay again.
4. Click on the same button to close the overlay - notice that it doesn't close.

Expected Behavior

The overlay should close on click of the trigger button as well as when the user clicks anywhere outside the overlay.

Actual Behavior

If the ability the close the overlay by clicking anywhere outside is added, clicking on the button again doesn't close the overlay.

Environment

• Angular: 17.3.1
• CDK/Material: 17.3.1
• Browser(s): All major browsers
• Operating System (e.g. Windows, macOS, Ubuntu): All operating systems

[PsychoSpike]

I can at least confirm this behavior. The moment you use (overlayOutsideClick) on the template and the template gets called once, it seems the original (click) on the button stops firing.

[pweyrich]

You can workaround this by using a transparent backdrop and close the overlay when it is clicked.

[cdkConnectedOverlayHasBackdrop]="true"
cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
(backdropClick)="isOpen = false"

This prevents the click event to be handled by the trigger.

[AnkitaSood]

You can workaround this by using a transparent backdrop and close the overlay when it is clicked.

[cdkConnectedOverlayHasBackdrop]="true"
cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
(backdropClick)="isOpen = false"

This prevents the click event to be handled by the trigger.

If I use this workaround, I have to click on the other button twice to actually open the overlay menu while one is open already, which is not an acceptable user experience.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}