When a datepicker is inside of a popover, overlays are layered in a confusing way

[isaaclyman]

Summary

A datepicker/timepicker inside of a popover is difficult to close. Clicking the popover content doesn't close the datepicker. The datepicker has an overlay, but it's underneath the popover.

Reproduction

In the following Stackblitz, click the button to trigger the popover, click the clock toggle in the input to trigger the timepicker, then click the lorem ipsum. The timepicker doesn't close. If you click outside of both popovers, the timepicker closes, but the original popover doesn't, which is confusing.

Stackblitz reproduction:

https://stackblitz.com/edit/angular-5tue8g?file=src/app/form-field-labels/form-field-labels-example.component.html

[isaaclyman]

Update: as a workaround, I tried adding a (click) handler to the <hc-pop> element. This doesn't seem to work.

[corykon]

@isaaclyman Want to check out this stackblitz and see what you think of this workaround? https://stackblitz.com/edit/angular-5tue8g-nxzcer?file=src%2Fapp%2Fform-field-labels%2Fform-field-labels-example.component.html

I'll see what I can find as far as fixing the issue in the library, but hopefully that helps in the meantime.

[corykon]

Looks like its just a z-index issue. Cdk-overlays are always at 2100, and the clickable backdrops are at 1000.

My thoughts on an in-library solution: A) Implement incrementing/decrementing z-indexes for cdk-overlays (popovers) and their backdrops like we do for modals (see modal.service.ts). That way when multiple popovers are open, the more recently opened popovers (and their overlays) stay above earlier ones. B) Just set datepicker popovers to a higher z-index then normal popovers.

Option A would be preferred.

[isaaclyman]

Want to check out this stackblitz and see what you think of this workaround?

I couldn't get Stackblitz to load, but that looks very similar to what I ended up doing. Should get the job done.