6

As exampled in this fiddle, there's seems to be an inconsistency issue with opening the md-datepicker multiple times when using md-open-on-focus.

The problem occurs after opening and closing it for the first time (which works ok) - after that, it'll randomly open on click and become unstable.

<md-datepicker ng-model="timeModel" md-hide-icons="all" md-open-on-focus></md-datepicker>

Has anyone experienced the same behavior and found a solution? Thanks.

Shaya
  • 2,792
  • 3
  • 26
  • 35

2 Answers2

2

Currently, the problem with md-hide-icons="all" and md-open-on-focus used together is, when you click outside, the focus remains on the input. But, since there are no icons to click for and focus is already on the input, there is no way we can open the datepicker.

If you click outside, and click outside again, focus from the input is gone, and it will work normally from there on which should arguably be the expected behavior.

But if you don't want such behavior, we can do something to change it!

Now, having a look at the datePicker code, in the closeCalendarPane function, they have

self.calendarPaneOpenedFrom.focus();

which is responsible for keeping focus on input. If we remove it, it would lose focus while clicking outside (or selecting a date from the picker) which is exactly what we want. They have some code handling input when openOnFocus is true but not sure how that helps!

Forked jsfiddle (changed line is at #31449)

Also, changing the library code isn't what we would normally want to do. So, for now, you could have a workaround like having a callback on md-is-open and removing the focus from the input element inside callback using your favourite way (jQuery/angular.element or pure JS) [As mentioned by @quirimmo]

Hope that helps!

tanmay
  • 7,761
  • 2
  • 19
  • 38
1

Unfortunately this functionality it's not implemented yet in angular material. If you take a look to the official examples, you will see the same behavior in the one using md-open-on-focus. https://material.angularjs.org/1.1.0/demo/datepicker

You need a little workaround in order to make it works. Just changed your example code:

HTML:

<md-datepicker ng-model="timeModel" md-hide-icons="all" md-is-open="isOpen" md-open-on-focus></md-datepicker>

JS:

angular.module('sandbox', ['ngMaterial'])
.controller('Ctrl', function($scope, $timeout) {
  $scope.timeModel = new Date();
  $scope.$watch('isOpen', function(newValue, oldValue) {
    if (!newValue && oldValue) {
        document.querySelector('.md-datepicker-input').blur();
    }  
  });
});

https://jsfiddle.net/ecs9ao89/

You can achieve also the same behavior defining a new directive and requiring the base datepicker of angular material, and open it on click. But this solution is smaller effort.

quirimmo
  • 9,800
  • 3
  • 30
  • 45