Angular -Material "md-datepicker" directive - problem "md-open-on-focus"

Question

As shown in this fiddle , there is a problem of inconsistency when opening md-datepicker several times when using md-open-on-focus . The problem occurs after the first opening and closing (which works fine) - after that it will randomly open on click and will be 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.

Answer 1

There is currently a problem with md-hide-icons="all" and md-open-on-focus used together , when you click on it, the focus remains on the input . But, since there are no icons for clicks, and the focus is already on the input, we cannot open the date.

If you click outside and click outside again , the focus from the input will disappear and it will work fine from there, which should probably be the expected behavior.

But if you do not want this behavior, we can do something to change it!

Now, by looking at the datePicker code, in the closeCalendarPane function, they have

 self.calendarPaneOpenedFrom.focus(); 

which is responsible for maintaining focus on the input. If we delete it, it will lose focus when clicking on it (or selecting a date from the collector), which is what we want. They have code input when openOnFocus is true, but not sure how this helps!

Forked jsfiddle (modified line is at # 31449)

Also, modifying the library code is not what we would normally want to do. So, at the moment, you may have a workaround, for example, accessing md-is-open and removing focus from the input element inside the callback using your favorite method ( jQuery / angular.element or pure JS) [As mentioned by @ quirimmo]

Hope this helps!

Answer 2

Unfortunately, this functionality is not yet implemented in angular material. If you look at the official examples, you will see the same behavior in using md-open-on-focus. https://material.angularjs.org/1.1.0/demo/datepicker

You need a little workaround to make it work. Just changed the 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 also achieve the same behavior defining the new directive and require the base datepicker angular material and open it when clicked. But this decision is less effort.