fix(datepicker): unable to close calendar when opened on focus in IE11

[crisbeto]

Fixes not being able to close a datepicker's calendar in IE11, if the datepicker's trigger opens it on focus. The issue comes down to the fact that all browsers focus elements synchronously, whereas IE does so asynchronously. Since our logic depends on everything firing in sequence, when IE focuses at a later point, the datepicker is already considered as closed which causes the logic that restores focus to the trigger to reopen the calendar.

Fixes #8914.

[crisbeto]

Note: I'm not a fan of having to do this timeout, however it's probably the least-breaking option. The alternatives are:

1. Adding a one-time focus event to the _focusedElementBeforeOpen that completes the closing logic. This works as well as the timeout, however it makes it a lot harder to flush out during unit tests, because you'd need to know the document.activeElement and you'd need to dispatch a fake focus event to it.
2. Adding a blur event on the currently-focused element so we know when focus was moved. Has the same issues as 1.
3. Scoping the timeout only to IE. The problem is that it makes unit tests inconsistent. Some fakeAsync tests would run fine on all browsers, but throw an X timer(s) still in queue error in IE.

[mmalerba]

is Promise.resolve().then too quick for this?

[crisbeto]

I don't remember trying it, but it should work. I went with the timeout since it would be more obvious what you need to do if your tests start failing. We can switch to the Promise.resolve if we want to make the sync easier.

[mmalerba]

I prefer to use it when possible since it executes quicker. I think adding a flush to your test will fix it in either case

[crisbeto]

It will, but the Promise.resolve won't throw the X timers in queue error which makes it a little harder to track down.

[mmalerba]

really? so what happens if it never gets flushed, does the test just pass?

[crisbeto]

Whatever is supposed to execute in the callback will happen after the test. In our case the opened property on the datepicker would always stay at false.

[mmalerba]

Oh, that sucks, would have expected fakeAsync to catch that. Fine with leaving it as setTimeout then

[angular-automatic-lock-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.}