bug(cdk/overlay): repeatedly opening and closing the overlay via (backdropClick) breaks responsiveness to clicks

[JonasLuechau]

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 17.3.6

No response

Description

If you open and close a cdk overlay with backdrop repeatedly with (backdropClick), it will get stuck and not respond to button clicks anymore. The backdrop (and overlay) stays open in this case and is only closeable via the Esc button. This breaks our automated e2e tests and could reasonably happen to a user.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-tgvat6zz?file=src%2Fmain.ts
Steps to reproduce:

1. Click pretty fast repeatedly on the open button
2. After a few clicks the click on the backdrop will not cause the overlay to close. You can still close it with Esc though.

Expected Behavior

The backdrop and overlay should close if I click on the backdrop and have the (backdropClick) set up to close it.

Actual Behavior

After a few clicks the backdrop and overlay stays open and does not react to clicks anymore.

Environment

Angular CLI: 19.0.7
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 19.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser

Package Version

@angular-devkit/architect 0.1900.7
@angular-devkit/core 19.0.7
@angular-devkit/schematics 19.0.7
@angular/build 19.0.7
@angular/cdk 19.1.2
@angular/cli 19.0.7
@angular/material 19.1.2
@schematics/angular 19.0.7
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0

[M4Git-Hub]

I have also encountered this problem. If you open and close the overlay quickly, it stops responding to backdrop clicks
here is my code:

<ng-template
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="showPanel"
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayPositions]="overlayPositions"
  [cdkConnectedOverlayBackdropClass]="'transparent-backdrop'"
  [cdkConnectedOverlayWidth]="trigger.elementRef.nativeElement.offsetWidth - 8"
  (backdropClick)="showPanel = false"
  (detach)="showPanel = false"
  cdkConnectedOverlay
  #overlay
>

[PalSzoboszlay]

I encountered this while using a mat menu with the backdropClass input. If I don't add the backdropClass, it works just fine. (Using the same stackblitz, just replaced main.ts)

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { MatMenuModule } from '@angular/material/menu';
import { provideAnimations } from '@angular/platform-browser/animations';

@Component({
  selector: 'app-root',
  imports: [MatMenuModule],
  template: `
    <p><button [matMenuTriggerFor]="appMenu">Clicking me fast will make the backdrop stuck</button></p>

    <mat-menu #appMenu backdropClass="any-class-name">
      <button mat-menu-item>Home</button>
    </mat-menu>

    <p><button [matMenuTriggerFor]="appMenu2">Clicking me fast doesn't make the backdrop stuck</button></p>

    <mat-menu #appMenu2>
      <button mat-menu-item>Home</button>
    </mat-menu>
`,
  styles: ``,
})
export class PlaygroundComponent {}

bootstrapApplication(PlaygroundComponent, {
  providers: [provideAnimations()],
});

In this case clicking on the menu item closes the backdrop, only clicking anywhere else doesn't, as the click event listener is not on the div.cdk-overlay-backdrop when it is stuck.

[M4Git-Hub]

If I don't add the backdropClass, it works just fine

In my case, removing cdkConnectedOverlayBackdropClass didn't help. The overlay still won't close

[crisbeto]

Double-checking: is the Stackblitz missing a (backdropClick)="isOpen.set(false)"? It's not closing for me even the first time around.