-
Notifications
You must be signed in to change notification settings - Fork 27.5k
Form model doesn't update on autocomplete #1460
Comments
Google Groups thread: http://groups.google.com/group/angular/browse_thread/thread/e8d96e712b244236 |
A similar problem and Firefox 15.0.1 |
How would you handle this? At glance it looks like the browser isn't firing change events if the form is being populated via autofill. The first thing I can think of is to run periodic checks on the form, but that sounds very suboptimal. |
Has anymore thought gone into this issue? |
Any insights on this one? |
Just banned completion. But this does not solve the problem |
+1 for effort towards some sort of solution. |
+1. Pls fix this |
I switch from Knockout to Angular just to find that it has the same issue with form autocompletion. |
+1 fix please. :( |
+1 Please fix!!!!! |
+1 |
+1 Please fix it :( |
Any progress? +1 |
The underlying problem I think is that browsers don't (always? ever?) emit any sort of event on auto-complete, as Witold said in this thread: https://groups.google.com/forum/?fromgroups=#!topic/angular/6NlucSskQjY. Other than periodically checking the value in every field that might auto-complete, I bet this is on browser makers to fix, not Angular. |
Dave, I understand what you're saying, but Angular still needs to come up with an integrated solution. The reason is that form validation coupled with disabling submit buttons renders the page unusable without special controllers listening for user actions. One solution could be to re-validate the forms automatically after page load, but unfortunately, I haven't found a way to re-fire the validation that way. |
I have the same issue on Chrome 25 on Win7. I found it from this issue: #1072 which also provides a temp fix. |
+1 Temp fix doesnt work for more complex cases (e.g. a select contains a object as model). |
+1... This is a very annoying issue. (Login forms should autofill. Now I can't let them be autofilled.) |
I would say the underlying issue is that browsers assumes the form will be submitted in the traditional manner, i.e. the field values will be read upon form submit. The best fix I can think of is to have a method in AngularJS for reading out ng-model bound values when the form is submitted. Perhaps this could be a generic feature of scopes, such as |
Here's an example of a very (!) simple and small ng-model implementation that allows for getting the values on demand. Simply
|
+1 |
Chrome at least does indeed emit an event (https://code.google.com/p/chromium/issues/detail?id=135307), so I think there is a legitimate issue here. In addition to a fix for the issue, it would be great to have a sanctioned workaround for browsers that do not emit an event which is explicitly forwards-compatible. |
Like a timeout of some sort specifically for forms. Or at least a way to tell angular to re-check. |
+1 Please fix this. I am using a temp hack which is quite dirty: $('#my-form input:visible, #my-form select:visible').each(function(){
$(this).trigger('input');
}); However, this will trigger another problem. I always got the following errors in concole:
|
whuhacker You need to call your hack outside of angular. . Try setTimeout(function() { ... }, 0) |
@mike-spainhower I believe that bug report is for a different type of auto-fill than a "remember password" type auto-fill. I've filed a new bug against Chrome here: https://code.google.com/p/chromium/issues/detail?id=224405 Which links to a JSFiddle that shows the "Remember password" auto-fill does not trigger a change event. |
@ryanmc2033 I agree 100%. Will someone please implement and submit PR? :) |
@ryanmc2033 if you think it's easy, send a pull request =) Tbosch put together https://github.com/tbosch/autofill-event a while ago as a way to solve this, so you should be able to use that. I thought it was linked in this issue, but I don't see it. |
@ryanmc2033 it's not enough. Some apps want check values on filling, not on submit. |
It seems that it has not been resolved yet. There is a msdn link which explains we should use onpropertychange instead of onchange to capture autofill event. http://msdn.microsoft.com/en-us/library/ms533032%28VS.85%29.aspx http://msdn.microsoft.com/en-us/library/ms536956(v=vs.85).aspx Is this helpful? |
I add the following row experimentally and it worked on IE 8! if ($sniffer.hasEvent('propertychange')) { |
@xzer the "propertychange" event is an IE thing, so this wouldn't benefit most users, or most of the supported browsers, and is very different from detecting "autofill" |
yes, it is a IE thing, so we need support it at least for IE8, I test it on IE8 and IE11, sorry I have only this two version in my machine, and it shows that IE11 don't have this event, which means "propertychange" is a IE 8 (or other old version) only event, which also means at least we can make IE 8 work correctly. |
It's more like a primitive version of Object.observe, and you'd run into bugs whenever any property other than @tbosch's library is a better solution for this, imo. |
for this event, we can add a wrapper function to fire the original deferListener for input element and value property only.
since this event is IE 8 only, which means at least IE8 users would benefit from this event and without any side effect for others, imo
at the msdn page I pasted, there is a statement which declared that "onpropertychange" is the official way to detect autofill: To determine when a user updates the content of a field from the AutoComplete dialog box, use the onpropertychange event, rather than the onchange event, because the onchange event does not fire. so I don't think using this event is evil. |
+1 |
@xzer Angularjs is a general-purpose library used by the whole world. Whole world meaning X browsers and their Y versions. Adding code which is known to only be for IE8 is not a very good idea in this regard, is it? Anyways, Angular 1.3 dropped support for IE8 (rightly so), and thus as far as I know, no steps would be taken in this regard from the Angular team. As a workaround, you can monkeypatch your own angularjs library to include support for IE8 if you wish to do so. |
@kumarharsh I agree with your opinion that angular js is designed for all browsers and all versions. I also think this bug fix is not necessary for the newest angular js version. But as a matter of fact, the current stable version shown on the office site is 1.2.x which declares supporting IE 7 & 8. For the old ages, IE only codes, Firefox only codes, Chrome only codes, we were suffering from all of those magic things, I understand it, and the current situation is that there are many developer who are still suffering from those things because the damned XP and old IE which are still used by many big companies, I believe the terrible situation would still continue for about 1-2 years. In conclusion, I believe it is worth fixing this problem in before 1.2.x versions officially, not my own monkeypatch. |
@kumarharsh I actually disagree with your sentiment- nobody likes having to support IE , TLDR:it's a bug fix that supports a browser that a few million people still use so a lot of us still have to deal with. If it helps some people, hurts no one, and the solution is in your hands- which is what @xzer appears to be asserting - then why stand in the way? |
There are a few bug reports filed for Firefox. I've filed one back in 2008 - https://bugzilla.mozilla.org/show_bug.cgi?id=430931, and there's one recent specific to this thread https://bugzilla.mozilla.org/show_bug.cgi?id=950510. Feel free to click "vote" and comment. |
+1 for the issue. The auto-completed fields have blank values in the models. I tried using some of the directives posted by other users here. But they never work. (Pardon my terminology, I'm new to Angular) |
my workaround
|
I had to modify @evictor's solution a tad, since I am not using jQuery, and thus don't have angular.directive('autofillFix', function () {
return {
link: function(scope, elem, attrs) {
// Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
elem.prop('method', 'POST');
// Fix autofill issues where Angular doesn't know about autofilled inputs
if(attrs.ngSubmit) {
setTimeout(function() {
elem.unbind('submit').bind('submit', function (e) {
e.preventDefault();
var arr = elem.find('input');
if (arr.length > 0) {
arr.triggerHandler('input').triggerHandler('change').triggerHandler('keydown');
scope.$apply(attrs.ngSubmit);
}
});
}, 0);
}
}
};
}); |
Grrrr, none of the above suggestions worked for me. AngularJS really should not make it more complicated for us. AngularJS shouldn't obstruct the autocompleter of a browser. |
@binarykitchen my dirty hack (#1460 (comment)) still works fine :) |
"Browsers just don't send events about autocompletion". |
AngularJS is a product of Googe so it does make at least a little bit of sense that they do. |
So it's a browser issue then? Is there a ticket for that on the Google Chrome issue tracker? |
@binarykitchen may I suggest you at least try to search before writing message that are emailed to 108 people. In this very thread the ticket were already mentioned (CTRL+F magic): Chrome: https://code.google.com/p/chromium/issues/detail?id=135307 Also @tbosch may I suggest you lock this thread ? I feel that everything that could be said was already said, with numerous workarounds mentioned. Most notably https://github.com/tbosch/autofill-event which is something that should work for every cases. The discussion is no longer constructive IMHO. |
I agree with @PowerKiKi, locking this thread now. |
…t update on autocomplete angular/angular.js#1460
Just an update that the issue is fixed in Chrome M40. Maybe even M39. There are still issues with Safari 7 and 8. In FF34 the forms autofill works well, but password autofill is still broken. |
I'm having problems with Safari 6.0 auto-complete on some simple forms
on Angular 1.0.2.
When Safari uses auto-complete to fill in the form, Angular seems to be
unaware of the new characters that were entered by auto-complete.
Please see the attached image for an example.
To reproduce:
I've created a jsFiddle that can be used to reproduce the problem:
http://jsfiddle.net/msgilligan/5cynT/
I've seen a similar problem when Safari 6.0 or Chrome 22.0.1229.79
automatically fills in a password field that has a 'required'
attribute. The form is not marked as valid and I have to go enter a
space after the password and then delete it.
The text was updated successfully, but these errors were encountered: