From aa347b52bace5cfe1ff528ad16973e02ae1b5dc1 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 11 Sep 2014 15:07:44 +0200 Subject: [PATCH] Use autofill-event.js to workaround browsers issue: Form model doesn't update on autocomplete https://github.com/angular/angular.js/issues/1460 --- webclient/index.html | 1 + webclient/js/autofill-event.js | 117 +++++++++++++++++++++++++++++++++ 2 files changed, 118 insertions(+) create mode 100755 webclient/js/autofill-event.js diff --git a/webclient/index.html b/webclient/index.html index dd2393722..9eea08215 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -17,6 +17,7 @@ + diff --git a/webclient/js/autofill-event.js b/webclient/js/autofill-event.js new file mode 100755 index 000000000..006f83e1b --- /dev/null +++ b/webclient/js/autofill-event.js @@ -0,0 +1,117 @@ +/** + * Autofill event polyfill ##version:1.0.0## + * (c) 2014 Google, Inc. + * License: MIT + */ +(function(window) { + var $ = window.jQuery || window.angular.element; + var rootElement = window.document.documentElement, + $rootElement = $(rootElement); + + addGlobalEventListener('change', markValue); + addValueChangeByJsListener(markValue); + + $.prototype.checkAndTriggerAutoFillEvent = jqCheckAndTriggerAutoFillEvent; + + // Need to use blur and not change event + // as Chrome does not fire change events in all cases an input is changed + // (e.g. when starting to type and then finish the input by auto filling a username) + addGlobalEventListener('blur', function(target) { + // setTimeout needed for Chrome as it fills other + // form fields a little later... + window.setTimeout(function() { + findParentForm(target).find('input').checkAndTriggerAutoFillEvent(); + }, 20); + }); + + window.document.addEventListener('DOMContentLoaded', function() { + // The timeout is needed for Chrome as it auto fills + // login forms some time after DOMContentLoaded! + window.setTimeout(function() { + $rootElement.find('input').checkAndTriggerAutoFillEvent(); + }, 200); + }, false); + + return; + + // ---------- + + function jqCheckAndTriggerAutoFillEvent() { + var i, el; + for (i=0; i 0) { + forEach(this, function(el) { + listener(el, newValue); + }); + } + return res; + } + } + + function addGlobalEventListener(eventName, listener) { + // Use a capturing event listener so that + // we also get the event when it's stopped! + // Also, the blur event does not bubble. + rootElement.addEventListener(eventName, onEvent, true); + + function onEvent(event) { + var target = event.target; + listener(target); + } + } + + function findParentForm(el) { + while (el) { + if (el.nodeName === 'FORM') { + return $(el); + } + el = el.parentNode; + } + return $(); + } + + function forEach(arr, listener) { + if (arr.forEach) { + return arr.forEach(listener); + } + var i; + for (i=0; i