IE10 Event Handling for button ng-click and ng-keyup

Question

In my HTML file, I have a text box and a button, and they are not related in any ways. The weird thing is that when I enter text into the text box and hit enter on the keyboard, it actually runs the function connected to the button's ng-click attribute. This only happens on IE10, but not IE11 or any other browers.

Any idea why this might be happening?

HTML

<h3>Group Fields  <input id="groupfields" ng-keyup="fr_group_update($event)"  ng-model="groupfields"></h3>

<div>
  <button ng-click="purge_tasks()">Purge Selection</button> <br/>
</div>

Controller

$scope.fr_group_update = function(event){ 
    if (event.keyCode === 13) {
        alert("This should run");
    }
};

$scope.purge_tasks = function(event){ 
    alert("This runs instead");
};

Answer 1

IE10 seems to handle buttons with no type property as if they were submit buttons. So when you press enter on any input on the page, it triggers the first button it finds.

You can easily fix that by explicitly setting the type attribute as button:

<button type="button" ng-click="purge_tasks()">Purge Selection</button>