Material: datepicker: loop toggle after selected date in IE11

[Kusumoto]

Actual Behavior:

• What is the issue? *
  I have a datepicker in my website used md-datepicker, that working correctly in all web browser. but sometime in Internet Explorer 11, datepicker component has been loop toggle after select date.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  https://codepen.io/anon/pen/KyGegz
  
  
  
  • Example issue result
    
    https://imgur.com/a/QauWl
  
  

AngularJS Versions: *

• AngularJS Version:
  v1.6.4
• AngularJS Material Version:
  v1.1.4

Additional Information:

• Browser Type: *
  Internet Explorer
• Browser Version: *
  11
• OS: *
  Windows 10 Pro x64
• Stack Traces:

[Splaktar]

The animated gif that you posted moves very fast. Can you please explain the issue in a little more detail? Can you compare that with the expected behavior?

It looks like the date is changing automatically somehow in an unintended way?

[Kusumoto]

OK. I will post example animated gif in slow case in follow link.
https://imgur.com/a/Hk6pa

This case is selected date in datepicker when Internet Explorer working slowly.

In normal case after selected date in datepicker, date value is fill to model and closed calendar but in this case when Internet Explorer working slowly, datepicker is loop toggle and cannot close calendar.

Yes, sometime date in datepicker is changing unintend.

[tiffmaelite]

I did just hit this bug as well, using version 1.1.5. It happens only if the user clicks inside the input field, not when the user clicks on the arrow for opening the calendar pane.
I think it has already been fixed in this commit: https://github.com/angular/material/commit/5615d06f60ac794ac75fb90ba0164b917e802bd5
@Kusumoto , upgrading your angularjs material dependency to 1.1.8 should therefore solve your problem.

[Splaktar]

@tiffmaelite the commit you linked is part of 1.1.0. But you are seeing this issue in 1.1.5?

Then it goes away for you in 1.1.8? That is likely related to another commit then.

[augustoclaro]

I'm seeing this issue on IE11 with version 1.1.8
is it going to be fixed?

[Splaktar]

@augustoclaro it's not being worked on atm since there hasn't been enough information provided for it to be actionable and @tiffmaelite indicated that it was fixed in 1.1.8.

Can you please provide a CodePen demo of your issue and a set of detailed reproduction steps along with explanations of how the behavior deviates from what you expect?

[blemaire]

@Splaktar I have just encountered the same issue and the description of the issue is very clear in this ticket:

The expected behaviour is as follow:

• click in the input
  -> the calendar menu opens
• select a date or click outside the menu
  -> the menu closes
  DONE.

The observed behaviour is as follow:

• click in the input
  -> the calendar menu opens
• select a date or click outside the menu
  -> the menu closes
  -> the menu re-opens
• select a date or click outside the menu
  -> the menu closes
  -> the menu re-opens
• select a date or click outside the menu
  -> the menu closes
  -> the menu re-opens
  ...
  ...

The only way out of the loop is to refresh the screen.

This only ever happens when internet explorer is working slowly (due to lack of ram or when the application is resource intensive or when using a slow VM).

The simplest reproductions steps are to use a slow VM running windows 10 with IE11 and use the angular-material demo codepen:

https://codepen.io/anon/pen/bKQgZq

Thanks for your support

[kylekatarnls]

This bug is the one mentioned in this comment:
https://github.com/angular/material/blob/0356bed24789e2e9a1c7d7842303031f03e68760/src/components/datepicker/js/datepickerDirective.js#L694

This work-around (nextTick) works only if the machine and browser are fast enough. Because when it happens in the same digest loop, you get:

isCalendarOpen = true
close
trigger focus to <input>
the focus trigger openCalendaPane but as isCalendarOpen is true, it does nothing
isCalendarOpen = false

With a slow machine you get the following order:

isCalendarOpen = true
close
trigger focus to <input>
isCalendarOpen = false
the focus (delayed by the browser slowness) trigger openCalendaPane, isCalendarOpen is yet false, so it re-open the pane

If you wrap this line (https://github.com/angular/material/blob/0356bed24789e2e9a1c7d7842303031f03e68760/src/components/datepicker/js/datepickerDirective.js#L700) in a setTimeout(), then everything always run in the right order.

[Splaktar]

This seems like a similar issue with $mdUtil.nextTick as seen in https://github.com/angular/material/issues/10609#issuecomment-406127512.

[Splaktar]

I was finally able to reproduce this. Changing the $mdUtil.nextTick to a $timeout was sufficient to fix it. I didn't need to wrap the $mdUtil.nextTick in a $timeout or use a 100 ms delay with the $timeout. The cause is likely related to how $mdUtil.nextTick batches up operations, which is not desirable in this case.