When typing text character by character into a search textbox, everything works fine. However, when pasting data directly into the textbox, the ng-model does not get updated. This issue only occurs in the safari browser.
Here is the HTML code:
<div class="div-input pull-left" ng-submit="submitFilterForm()" ng-class="{ 'filter-dropdown-adjustment' : showFilterState() }">
<input type="text" class="filter-input" ng-model="query" my-enter="submitFilterForm()" auto-focus />
</div>
The custom directive 'my-enter' handles the click or press of the enter key.
This is the content of the directive:
'use strict';
define([
'angular',
'./module',
], function(angular, directives) {
/**
* Like ngShow but uses CSS visibility instead of display
*/
directives.directive('myEnter', [
function() {
return function(scope, element, attrs) {
element.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
scope.$eval(attrs.geEnter);
});
event.preventDefault();
}
});
};
}
])
This JavaScript file contains a $watch function on the ng-model for the textbox:
$scope.$watch("query", function(name) {
$scope.validationError = false;
console.log("value of query is", name);
filterStateService.updateSearchQuery(name);
});