Form model not updating on non-keyboard changes to input fields

[Sean Gilligan]

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:
1) Enter data into the form a few times so that auto-complete is activated.
2) Then enter a few characters that triggers an auto-complete.
3) Hit return.
4) Compare the alert message with the contents of the input field.

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.

Am I doing something wrong or is this a bug?

Thanks,

Sean

[Sean Gilligan]

On 10/8/12 3:52 PM, Sean Gilligan wrote:
> To reproduce:
> 1) Enter data into the form a few times so that auto-complete is
> activated.
> 2) Then enter a few characters that triggers an auto-complete.
> 3) Hit return.
> 4) Compare the alert message with the contents of the input field.

p.s. You might have to disable the ng-submit attribute and add an
action="xyz" attribute to the form to get the autocomplete loaded with
some strings. It seems they are not initialized when the form is not
submitted by the browser.

[Sean Gilligan]

I used the work-around of setting autocomplete="off" on the form and my
client is satisfied with that solution, but I still think that Angular
should handle this properly.

-- Sean

[Sean Gilligan]

I created an Issue:
https://github.com/angular/angular.js/issues/1460

-- Sean

[brian.f...@gmail.com]

Any update on this issue?  Same exact problem.  Autocomplete is pretty ubiquitous for certain forms IMO, and disabling it is a poor option.  Nearly as poor is having to manually update all the $modelValue/$viewValue properties.  It sort of defeats the purpose, as it ends up being less work to simply forego ng-form and simply do the validation and model management yourself.

Are we missing something?

[Diego Muñoz Escalante]

I am having this issue in Chrome as well. In the meantime I have a directive to do a really dirty hack as a workaround. I am not proud of it but it can be useful to someone.

I add a "auto-fillable-field" directive attribute to an input field like:

<input

  auto-fillable-field

  type="text"

  name="email"

  ng-model="email">

And then, the directive uses a disgusting timeout:

.directive('autoFillableField', [

  '$timeout',

  function($timeout) {

    return {

      require: '?ngModel',

      restrict: 'A',

      link: function(scope, element, attrs, ngModel) {

        $timeout(function() {

          if (ngModel.$viewValue !== element.val()) {

            ngModel.$setViewValue(element.val());

          }

        }, 500);

      }

    };

  }

]);

Anyone is using a more elegant solution? Are there plans to fix this for Angular 1.0.3?

[finish...@yahoo.com]

I'm also having a similar problem, so giving this a +1.

AngularJS should provide a better solution.

Arsen.

[Witold Szczerba]

As far as I know this is happening, because the creators of browsers did forget to implement ANY kind of notification when autocomplete triggers. I think the only solution to that is to periodically check and update, like Diego Muñoz Escalante did.

Does anyone know other solution?

Regards,
Witold Szczerba
---
Sent from my mobile phone.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

[Thomas Steinhauer]

easy fix via jQuery val(), angular fix this please.

$scope.processAuthAction = ->

  unless $scope.user && $scope.password           

    $scope.user = $("#loginform [name=user]").val()           

    $scope.password = $("#loginform [name=password]").val()

[Dave Merrill]

Unless I don't understand the code snippet, you're relying on an outside event, probably a submit action, and harvesting the values then. That will work fine if you don't care about the model updating until then. I haven't tested, but I doubt you need jQuery's val(), just that external event. 

It's not addressing the underlying problem though, which I believe is that browsers don't (always? ever?) emit any sort of event on auto-complete, as Witold said. 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 Merrill