Ng-click unexpectedly triggered by pressing Enter key in IE8
I have a simple ng-click button nested inside an ng-repeat and not on the current page <form>
.
<tr ng-repeat="product in catalog | limitTo: total track by $index" ng-class="{highlight: product==selected}">
<td class="highlight-hide">
<div ng-if="canDoSelfOrdering">
<button class="btn btn-mini" ng-click="callPricing(product)">Price & Order</button>
</div>
</td>
<!-- other td -->
</tr>
when the directory array is updated and the user pressed ENTER without focus on any inputs. the last button element is ng-click="callPricing(product)"
triggered unintentionally.
I tried watch document.activeElement before pressing Enter key it <body>
How can this be prevented?
source to share
Internet Explorer documentation says that in IE8 standards mode the default button value is entered.
If the ENTER key is pressed when the user views a form that contains a Submit button, the form is submitted.
While you don't have any forms to submit, I guess IE8 doesn't validate this. Just try writing your button type as a button explicitly.
<button type="button" class="btn btn-mini" ng-click="callPricing(product)">Price & Order</button>
source to share