Skip to content

[9.0.0-rc.9] CdkConnectedOverlay.backdropClick events do not instigate change detection in OnPush #18398

@benelliott

Description

@benelliott

Reproduction

See this repository as the StackBlitz template is not configured for v9 RC: https://github.com/benelliott/repro-cdk-overlay

Expected Behavior

What behavior were you expecting to see?

CdkConnectedOverlay.backdropClick events should be emitted within the Angular zone so that they are picked up by ChangeDetectionStrategy.OnPush.

Actual Behavior

Setting a value in a component based on the backdropClick event causes no changes under OnPush without a manual call to ChangeDetectorRef.detectChanges.

I think this is because in https://github.com/angular/components/blob/master/src/cdk/overlay/overlay-directives.ts#L380 the backdropClick.emit call needs to be run inside NgZone.run.

    if (this.hasBackdrop) {
      this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
        this.backdropClick.emit(event);
      });
    } else {
      this._backdropSubscription.unsubscribe();
    }

For some reason, this didn't cause issues under Angular/CDK v8 but it causes issues in Ivy, presumably due to internal changes in Ivy's change detector.

Environment

  • Angular: 9.0.0-rc.14
  • CDK/Material: 9.0.0-rc.9
  • Browser(s): Chrome 79
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/overlayneeds investigationA member of the team needs to do further investigation to determine the root cause

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions