Datepicker in md-dialog causes ui to freeze after the dialog is closed

[ongeri]

I have placed the datepicker in an md-dialog and displaying and everything works fine but when I close the dialog the rest of the ui freezes and I cannot click on any buttons or ng-click items. This happens only if I open the dialog twice. It behaves as if there is some kind of internal counter which triggers it to swallow all ng-click events.

[mominsamir]

Hi can you provide me a plunkr :)

[jonpikum]

The demo page has this issue. This is very strange.. http://mominsamir.github.io/smDateTimeRangePicker/#/date-time-picker-demo

You can force this to happen every single time, even without opening the date picker

(I am using chrome) Steps to reproduce:

1. Open the dialog that contains the date picker.
2. Close the dialog
3. Open the dialog again
4. Close the dialog

After these steps, it appears the exact issue is with the md-scroll-mask element. It remains on the page after the dialog has been closed and blocks interaction with any content. Unable to scroll, click, etc.

[mominsamir]

it seems this issue is realted to mdDailog it self.

https://github.com/angular/material/issues/3287#issuecomment-118993333

see the commets

[uocnb]

I taken a quick trace and found this:

Picker register click event on document here https://github.com/mominsamir/smDateTimeRangePicker/blob/master/src/picker.js#L1588

but I don't see where it get removed after calendar pane removed and it make many call to $mdUtil.enableScrolling() which decreased $mdUtil.disableScrollAround._count too much https://github.com/angular/material/blob/master/src/core/util/util.js#L209

[mominsamir]

https://github.com/mominsamir/smDateTimeRangePicker/blob/master/src/picker.js#L1641

it gets removed from here, but i am thinking to not to use mdUtil and insert own scrolling layer

[uocnb]

I have made dirty quick fix with this piece of code $(document).click((event) => { var el = $(event.target); if (el.hasClass('md-scroll-mask')) { if ($('.md-dialog-backdrop').length == 0) { el.remove(); } } });

[dorcohen8]

Thanks @mominsamir but the issue still reproduced and creating <div class="md-scroll-mask"> over the entire screen

[mominsamir]

@dorcohen8 check this plunkr, I am not able to re product mask. are you using service? http://plnkr.co/edit/2ePb5nf8vH71iH5byP7q?p=preview

[mjrcmrma]

try setting z-index: 0 to .md-scroll-mask, this is the property that causes that "freeze" this div is transparent and is overlapping your whole page

[mtraynham]

Probably better to leave the z-index as is, and set the pointer-events: none.

[oscar09]

This problem is related to mdDialog. If you upgrade to angular material 1.1 the problem is fixed.