Whenever I try to click on the md-date-picker inside md-menu, it unexpectedly closes. You can view the issue on this CodePen link. This seems to be a bug related to ng-material as discussed in this GitHub issue. Any suggestions for a workaround?
Here is the HTML:
<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-app="MyApp">
<div class="menu-demo-container" layout-align="center center" layout="column">
<h2 class="md-title">Month Select</h2>
<p>Select a month by clicking the input</p>
<md-menu>
<input md-menu-origin="" aria-label="Open phone interactions menu" ng-focus="ctrl.openMenu($mdOpenMenu, $event)" ng-model="ctrl.selectedMonth">
<md-menu-content width="4" ng-click="$event.stopPropagation()">
<md-datepicker ng-model="dateFilter" md-placeholder="Till date" md-min-date="dateFilter.fromDate"></md-datepicker>
</md-menu-content>
</md-menu>
</div>
</div>
And here is the JS:
angular
.module('MyApp')
.controller('BasicDemoCtrl', function DemoCtrl($mdDialog) {
var originatorEv;
this.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
this.setMonth = function(val) {
this.month = val;
this.setSelectedMonth();
};
this.notificationsEnabled = true;
this.toggleNotifications = function() {
this.notificationsEnabled = !this.notificationsEnabled;
};
this.nextYear = function() {
this.year++;
this.setSelectedMonth();
};
this.preYear = function() {
this.year = this.year - 1;
this.setSelectedMonth();
};
}).directive('stopEvent', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (attr && attr.stopEvent)
element.bind(attr.stopEvent, function(e) {
e.stopPropagation();
});
}
};
});