Angular bootstrap datepickers open when user presses Enter key on unrelated input field

Question

I have 2 datepickers, 'from' date and 'to' date in a search from. Also a few input fields for different search criteria, and a submit button.

When focus is on a text field and the user presses Enter, instead of sending the form the focus moves to the first of the datepickers and opens the calendar view of it.

Markup for the form (partial for relevance):

<div class="form-group">
   <label class="col-xs-3 control-label" for="txtSupplierList" translate>Supplier</label>
       <div class="col-xs-4">
           <input class="form-control"
                  id="txtSupplierList"
                  type="text" 
                  ng-model="vm.supplierName" 
                  placeholder="{{'name or ID'| translate}}"
                  ng-keyup="vm.searchAppls()" />
       </div>
</div><!-- @form-group -->

<div class="form-group value">
    <label class="col-xs-3 control-label" for="dateFrom" translate>Created date from</label>

    <div class="col-xs-3">
        <p class="input-group p-group-format">
            <input class="form-control"
                   type="text"
                   ng-click="open1($event,'opened1')" 
                   is-open="opened1"
                   max-date="maxDate"
                   placeholder="{{'dd/mm/yyyy' | translate}}"
                   datepicker-options="dateOptions"
                   ng-required="true"
                   datepicker-popup="{{format}}"
                   ng-model="vm.from"
                   current-text="{{'Today'| translate}}"
                   toggle-weeks-text="{{'Weeks'| translate}}"
                   clear-text="{{'Clear'| translate}}"
                   close-text="{{'Close'| translate}}"
                   ng-change="vm.logicalDates(vm.from, vm.to)" />
                   <span class="input-group-btn">
                        <button class="btn btn-standard" ng-click="open1($event)">
                        <i class="glyphicon glyphicon-calendar"></i>
                       </button>
                   </span>
                   <div class="value form-group pull-right" ng-if="!vm.logicalDatesBool">
                   <div class="note note-error" translate>'From' date should preceed 'to' date</div>
        </div>
    </p>
</div>

<label class="col-xs-1 middleLabel" for="dateUntil" translate>to</label>

<div class="col-xs-3">
    <p class="input-group p-group-format">
        <input class="form-control"
               type="text"
               ng-click="open2($event, 'opened2')" 
               is-open="opened2"
               max-date="maxDate"
               placeholder="{{'dd/mm/yyyy' | translate}}"
               datepicker-options="dateOptions"
               ng-required="true"
               datepicker-popup="{{format}}"
               ng-model="vm.to"
               current-text="{{'Today'| translate}}"
               toggle-weeks-text="{{'Weeks'| translate}}"
               clear-text="{{'Clear'| translate}}"
               close-text="{{'Close'| translate}}"
               ng-change="vm.logicalDates(vm.from, vm.to)" />
               <span class="input-group-btn">
                    <button class="btn btn-standard" ng-click="open2($event)">
                    <i class="glyphicon glyphicon-calendar"></i>
                    </button>
               </span> 

    </p>                                                       
</div>

</div><!-- form group -->

To divide behavior between the 2 datepickers I have a in my controller this code (options etc omitted for brevity):

 vm.open = open;

    $scope.open1 = function ($event) {
        $event.preventDefault(); 
        $event.stopPropagation();

        $scope.opened1 = true;
    };

    $scope.open2 = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened2 = true;

    };

There is more to the form, 6 standard input fields in total, nothing special about them, then a submit button at the end. So, to reiterate: the issue is that when the user has focus on the Supplier text input or any other, and then presses Enter, instead of the form being sent (ie a search returns results) the first of the datepickers opens to display the calendar. What's binding the calendar to the Enter key?

Why is this happening and how can I fix it?

score 0 · Accepted Answer · answered Oct 20 '17 at 09:43

Answering my own question because there are answers here on SO, but they have titles that make them hard to find, and Google's results show the UI-Datepicker Github where they claim to have fixed this bug on multiple occasions but clearly have not done so.

So, answer is here by user rahil-wazir

For each of my input elements I added the attribute:

ng-keypress="keyPress($event)"

The whole element looks like this:

<input class="form-control" 
       id="fooID" 
       ng-model="vm.foobar" 
       maxlength="100" 
       placeholder="{{'Foo name'|translate}}"
       ng-keyup="vm.searchFunction()"
       ng-keypress="keyPress($event)" />

and then in my Controller function I added a new function like this:

        $scope.keyPress = function(e) {
        // console.log(e);
        if (e.charCode == 13) {
            e.stopPropagation();
            e.preventDefault();
            e.bubbles = false;
            searchFunction();
            return false;
        }
    }

As you can see, I also wanted to perform a search when the Enter key is pressed, so the keyPress function calls that. Nothing to do with the datepicker.

Angular bootstrap datepickers open when user presses Enter key on unrelated input field

1 Answers1