datepicker: doesn't open on focus in Firefox

[kgriffiths]

Actual Behavior:

• What is the issue? *: md-open-on-focus will not display the calendar on Firefox, but works as expected on Chrome and Edge
• What is the expected behavior?: Calendar is expected to open on focus in every browser

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://material.angularjs.org/1.1.4/demo/datepicker
• Details: Use Firefox, and click the "Opening the calendar when the input is focused" example. Clicking the text does not open the calendar as expected.

AngularJS Versions: *

• AngularJS Version: 1.6.0
• AngularJS Material Version: 1.1.4

Additional Information:

• Browser Type: * Firefox
• Browser Version: * 53.0 (32-bit)
• OS: * Windows 10
• Stack Traces:

[henrymana]

I am able to replicate on macos and firefox 53.0 64bit.

It appears to come up and then close very quickly for me.

I used the demo page for material 1.1.4 which is using angularjs v1.5.5.

[alberto78]

Same here.
It only happens with Firefox.

As far as I have seen, for some reason when 'md-calendar' is checked in handleBodyClick it doesn't exists (in time?) and then closeCalendarPane is called.
Line 868 at datepickerDirective.js

I don't know if this is the best solution but adding a check to 'md-datepicker' did the trick for me.
var isInCalendar = this.$mdUtil.getClosest(event.target, 'md-datepicker') || this.$mdUtil.getClosest(event.target, 'md-calendar');

Tested with:

• angularjs: 1.5.11
• angular-material: 1.1.5
• browsers: Chrome 62, Firefox 56 and IE 11

[Splaktar]

I can reproduce this on https://material.angularjs.org/1.1.10/demo/datepicker with Firefox 63.0.3 (64-bit).