Description
Bug
Starting with angular cdk version 6.4.3 there seems to be an incompatibility with zone-patch-rxjs which causes an infinite loop. For this reason some components, in our case the datepicker, won't work as expected.
What is the expected behavior?
When selecting a date in the datepicker (or closing it by clicking outside of the datepicker) it should not cause an error. It should also be possible to open the datepicker a second time.
What is the current behavior?
When selecting a date in the datepicker it throws a "Maximum call stack size exceeded" error. When opening the datepicker the second time it doesn't show the calendar, but an empty flyout.
Note: That's only true for angular cdk versions >= 6.4.3 and if "zone-patch-rxjs" is included. And also it's only broken for non touch-ui mode.
What are the steps to reproduce?
- Create an angular cli project
- Install angular material in the latest version (incl angular cdk in latest version)
- Integrate a datepicker on the page
- Load zone-patch-rxjs
- Start the application
- Open the datepicker
- Select a date
- Try to open the datepicker again
Example on stackblitz which is not working same example with angular cdk version 6.4.2 that is working as expected. You can get from one to the other with installing the dependencies @angular/cdk@6.4.3 @angular/material@6.4.3 @angular/material-moment-adapter@6.4.3 or the other way around with 6.4.2. That's the only difference.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Chrome Version 68.0.3440.84 (official build) (64-Bit)
- Firefox 61.0.1 (64-Bit)
- Typescript 2.7.2
- Angular Material (and CDK) >= 6.4.3
- rxjs 6.2.2 (and rxjs-compat 6.2.2)
- zone.js 0.8.26
- Angular 6.1.2
- Ubuntu 18.04
However, the issue doesn't seem to be browser, TypeScript, or OS related. Angular CDK, zone.js and maybe rxjs seem to be the important factors.