Components: Overlay in combination with ag-Grid in Firefox causes too much recursion exception

[coronabytes]

Bug

What is the current behavior?

Angular Material 6.4.3 and up causes an "too much recursion" exception on components where ag-Grid is used and a modal or drawer opens.
Happens only in Firefox (61.0.2) where Chrome (68.0.3440.106) works just fine.
Downgrading to angular material 6.4.2 resolves this issue. (That's why I'll post the error here first and not on ag-Grid)

What are the steps to reproduce?

TODO - Need to setup free ag-Grid with material drawer or modal in stackblitz
UPDATE: Tried to replicate the issue in striped down project with just an overley drawer and bare minimum ag-grid and of course thats working... so this will be rather fun to reproduce.

Stacktrace

NotFoundError exception is thrown 115 times...

NotFoundError: Node was not found overlay.js:874
detach/subscription<
overlay.js:874
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
_next
Subscriber.js:76
next
Subscriber.js:51
subscribe/schedulerFn<
core.js:4308:28
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
next
Subject.js:39
emit
core.js:4288:17
checkStable/<
core.js:4589
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
runOutsideAngular
core.js:4566:47
checkStable
core.js:4589
onLeave
core.js:4662
onInvokeTask
core.js:4612
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask
zone.js:420
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask
zone.js:188
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask
zone.js:496
invokeTask
zone.js:1540
globalZoneAwareCallback
zone.js:1566
detach/subscription<
overlay.js:874
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
_next
Subscriber.js:76
next
Subscriber.js:51
subscribe/schedulerFn<
core.js:4308:28
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
next
Subject.js:39
emit
core.js:4288:17
checkStable/<
core.js:4589
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
runOutsideAngular
core.js:4566:47
checkStable
core.js:4589
onLeave
core.js:4662
onInvokeTask
core.js:4612
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask
zone.js:420
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask
zone.js:188
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask
zone.js:496
invokeTask
zone.js:1540
globalZoneAwareCallback
zone.js:1566
detach/subscription<
overlay.js:874
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
_next
Subscriber.js:76
next
Subscriber.js:51
subscribe/schedulerFn<
core.js:4308:28
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
next
Subject.js:39
emit
core.js:4288:17
checkStable/<
core.js:4589
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
runOutsideAngular
core.js:4566:47
checkStable
core.js:4589
onLeave
core.js:4662
onInvokeTask
core.js:4612
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask
zone.js:420
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask
zone.js:188
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask
zone.js:496
invokeTask
zone.js:1540
globalZoneAwareCallback
zone.js:1566
detach/subscription<
overlay.js:874
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
_next
Subscriber.js:76
next
Subscriber.js:51
subscribe/schedulerFn<
core.js:4308:28
__tryOrUnsub
Subscriber.js:200
next
Subscriber.js:139
_next
Subscriber.js:76
next
Subscriber.js:51
next
Subject.js:39
emit
core.js:4288:17
checkStable/<
core.js:4589
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
runOutsideAngular
core.js:4566:47
checkStable
core.js:4589
onLeave
core.js:4662
onInvokeTask
core.js:4612
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask
zone.js:420

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

"@angular/animations": "6.1.6",
"@angular/cdk": "6.4.7",
"@angular/common": "6.1.6",
"@angular/compiler": "6.1.6",
"@angular/core": "6.1.6",
"@angular/forms": "6.1.6",
"@angular/http": "6.1.6",
"@angular/material": "6.4.7",
"@angular/platform-browser": "6.1.6",
"@angular/platform-browser-dynamic": "6.1.6",
"@angular/router": "6.1.6",
"@ctrl/ngx-codemirror": "1.3.8",
"ag-grid": "18.1.2",
"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",
"angular2-uuid": "1.1.1",
"bootstrap": "4.1.3",
"codemirror": "5.40.0",
"core-js": "2.5.7",
"hammerjs": "2.0.8",
"moment": "2.22.2",
"ng2-dnd": "5.0.2",
"popper.js": "1.14.4",
"rxjs": "6.3.1",
"zone.js": "0.8.26"

Browser: Firefox (61.0.2)
"typescript": "2.9.2"
AOT
ES6

[ibexes]

There is also too much recursion regarding placing material datepicker and material select in a modal. After placing a select or datepicker (anything with a further overlay) within a modal, the following are thrown

[Show/hide message details.] too much recursion[Learn More] zone.js:163
[Show/hide message details.] too much recursion[Learn More] zone.js:388
[Show/hide message details.] NotFoundError: Node was not found
overlay.es5.js:1049

This then makes the entire tab crash (due to the recursion). This seems to work fine in Chrome (no error is thrown at least). Not even sure I can come up with a workaround if I want to use material datepicker and select within a modal...

Edit:
Sorry, didn't mean to hijack this thread, just thought it was relevant, some bug within the overlay. Downgrading to 6.4.2 does nothing except remove a few eyesore warnings.

Edit2:
I noticed that it happens outside the modal too in a component with an ag-grid as a sibling. It could be my specific configuration, but the error seems to be thrown upon the mouse leaving the overlay. I'll try and make a minimal example of issue at some point.

[josephperrott]

@crisbeto I think this is related to #12686

[crisbeto]

Should be resolved by https://github.com/angular/material2/commit/c2e502c.

[ronlawrence3]

This is not yet resolved. I am on version 7.3.7 of the CDK and still see this with material modals containing ag-grid.

Note that upgrading to ag-grid-community 20 fixes the issue.

[AshMcConnell]

I'm getting the same issue with a mat-select on firefox. It seems to be an overlay problem, but I can't figure out what is causing it.

[AshMcConnell]

Ah, it was also an ag-grid issue for me. I forgot we were using ag-grid on that page, upgrading it worked for me

[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._}