Pressing ESC in ui.bootstrap.datepicker closes ui.bootstrap.modal Dialog

[MichaelFromin]

I am using both your ui.bootstrap.datepicker and ui.bootstrap.modal in a simple Angular app. I can open the modal and display the datepicker when clicking into an input field. (So far so good)

I can select a date or click outside the datepicker to close it. Unfortunately when I use the ESC key to close the datepicker it also closes the modal dialog.

I setup the input field like this:

<input type="text"
               class="form-control"
               name="startDate"
               ng-model="prospect.evalStartDate"
               uib-datepicker-popup="shortDate"
               is-open="datepickers.startDate"
               datepicker-options="dateOptions"
               show-button-bar="false"
               ng-click="open($event, 'startDate')"
               required />

and then in the controller I do this:

        $scope.prospect = {};
        $scope.datepickers = {
            startDate: false,
            endDate: false
        }
        $scope.status = {
            opened: false
        };
        $scope.dateOptions = {
            startingDay: 1,
            showButtonBar: false,
            showWeeks: false
        };

        $scope.open = function($event, which) {
            $event.preventDefault();
            $event.stopPropagation();

            $scope.datepickers[which]= true;
        };

        $scope.ok = function () {
            console.log('OK was clicked: ' + $scope.prospect.name);
            $uibModalInstance.close($scope.prospect);
        };

        $scope.cancel = function () {
            console.log('Cancel was clicked');
            $uibModalInstance.dismiss('cancel');
        };
    };

I had hoped that the $scope.open function would have solved this by not propagating things but that appears to not be happening.

Any thoughts would be appreciated...

[wesleycho]

On a div wrapping the datepicker input, one can do

<div ng-keypress="stopPropagation($event)">
...
</div>

and

$scope.stopPropagation = function($event) {
  $event.stopPropagation();
};

I guess given that we swallow events for other stuff for behavior specific to a component, we should also swallow this.

PRs welcome.

[MichaelFromin]

@wesleycho The problem with that is that you don't press a key to invoke the datepicker - you use the mouse. That code is never triggered. When you click on the field it triggers a mouse event.

Am I missing something on how to trigger the keypress stuff?

[icfantv]

@MichaelFromin, but you are hitting the ESC key, no?

[MichaelFromin]

@icfantv Once the date picker is open - yes. So I need a way to trap that and not propagate it to the modal. What I am missing is how to use stopPropagation on the keypress event when I don't have a keypress event to trigger the opening of the date picker itself.

[wesleycho]

I don't see how my suggestion doesn't solve this issue from the user's side - if you wrap the datepicker with an element with ng-keypress, one can catch the esc key and stop the propagation.

One does not need a keypress event to know when the datepicker is opened. One can simply use the information from the is-open two-way binding.

[MichaelFromin]

So it turns out that on Webkit browsers using keyPress to get the ESC key is the issue - its effectively a browser defect:

angular/angular.js#10905

If I rely on keyDown instead this does what I need. Thanks for your assistance with this.