Overlay panel strange buggy events in material components

[darkyelox]

What is the expected behavior?

The use of material components inside the overlay

What is the current behavior?

The events seems to be delayed in the views or it looks like the events aren't updating the view, I tested with several components like mat-radio (the next gif), mat-calendar (total disaster when trying to change months and year, the view doesn't show months until I do a new click somewhere inside) and so on, the problem persist no matter which component is used

What are the steps to reproduce?

Here is the example, I used mat-calendar, you can try to use the controls and they feel and look buggy, sometimes works at first, but always you need to click other element to see the view changes

stackblitz.com/edit/pebula-ngrid-starter

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

  "name": "compensar-backend-admin",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.2",
    "@angular/cdk-experimental": "^9.2.2",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.2",
    "@angular/material-moment-adapter": "^9.2.2",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@mdi/angular-material": "^5.0.45",
    "@pebula/ngrid": "^2.0.0-rc.2",
    "@pebula/ngrid-material": "^2.0.0-rc.2",
    "class-transformer": "^0.2.3",
    "lodash.isnil": "^4.0.0",
    "ngx-cookie-service": "^3.0.4",
    "ngx-custom-validators": "^9.1.0",
    "reflect-metadata": "^0.1.13",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "winston": "^3.2.1",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

Is there anything else we should know?

nothing more

[shlomiassaf]

Sort for the delay, I probably missed this one.

Yes, I saw the bug.

The overlay will render a component using a portals (CDK) which is is fired in a different place on the page.
When changes occur it seems that detectChanges is not called to verify if anything has been marked for change.

This is probably because the portal is in a different CD branch.
Or, it might be that some other plugin, maybe target events, is blocking the events but I'm not sure this is the case.

When clicking on any item in an open overlay, the DOM element is outside the grid, it is not an ancestor of it, it's not even an ancestor of the root application.

I will have to investigate here.