CODEWITHSUNDEEP
knockout.jsautofillnorton
DasBeasto
DasBeasto

Reputation: 2282

Autofill form form (Norton Identity Safe) not updating Knockout observable value

I have a login form that uses Knockout.js for ts values.

Stripped down sample code:

<input id="username" placeholder="Email" data-bind="textInput: Profile.Email" required />
<input id="password" type="password" placeholder="Password"  data-bind="textInput: Profile.Password" required />

var Profile = function () {
    self.Email = ko.observable('');
    self.Password = ko.observable('');
}

When a program like Norton Identity Safe, a password manager, autofills your log in information (I haven't been able to verify other sources of autofill) the observables for Profile.Email and Profile.Password do not get updated. If I click in the box and give the field focus and then leave the field the value still is not updated. It is only when I add or remove a character that the field is updated.

I have seen some other threads on here about how to "hack" a way around this but they are all pre-KO 3.2.0 which included the textInput binding which looks like it should fix this issue, yet it does not.

Is there any reason why textInput is not updating the observable value on autofill and have there been any new ways to get the value to update that aren't so "hacky".

Upvotes: 1

Views: 179

Answers (1)

Roy J
Roy J

Reputation: 43899

Unless the change() trigger is fired, Knockout will not see the updated input value. Here's a little demo you can play with. If the check box is checked, the change trigger is fired after the value is updated, and the observable value is changed then.

vm = {
  uname: ko.observable('initial'),
  changeIt: function() {
    var $el = $('#username').val('changed!');
    if (vm.doTrigger()) {
      $el.change();
    }
  },
  doTrigger: ko.observable(false)
};
ko.applyBindings(vm);

vm.uname.subscribe(function(newValue) {
  console.debug("Changed:", newValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input id="username" data-bind="textInput: uname" />
<div data-bind="text:uname"></div>
<button data-bind="click:changeIt">Change It</button>
Trigger it: <input type="checkbox" data-bind="checked: doTrigger" />

See also: Update field with jquery don't update observable

Upvotes: 1

Related Questions