Blog of Raivo Laanemets

Stories about web development, freelancing and personal computers.

Autofill troubles two-way binding frameworks

On

When recently working on https://github.com/rla/feeds I stumbled on a bug where my authentication form did not work anymore. I am using the KnockoutJS framework and I had set up binding between the login form fields and my app’s model observable properties:

in my HTML:

<form class="form-inline" data-bind="submit: login">
    <input type="text" name="user" placeholder="user"
        class="input-small" data-bind="value: user">
    <input type="password" name="pass" placeholder="pass"
        class="input-small" data-bind="value: pass">
    <button type="submit" class="btn">Login</button>
</form>

in my app.js:

var app = {
    // ...
    user: ko.observable(),
    pass: ko.observable()
    // ...
}

Everything works when you manually enter the user name and password. But when they are automatically filled and you click Login, the values app.js uses are the default values specified in the observable property creation. This happends because KnockoutJS uses a DOM event (the change event by default) that will trigger the model update. But autofill will not create a change event, at least not in Firefox.

Relevant issues:

Workarounds:

  • Trigger change event manually.
  • Disable autofill by autocomplete="off".
  • Use custom valueUpdate binding described here (might break validation).
  • Poll for changes (does not scale?).
  • Wait till it gets properly fixed.
  • Manually use values.

I settled for the last solution. The DOM element corresponding to the form gets passed as the first argument of the submit handler anyway:

login: function(form) {
    var inputs = form.elements;
    var credentials = {
        user: inputs.user.value,
        pass: inputs.pass.value
    };
    // ...
}

AngularJS has similar issue, see Form model doesn’t update on autocomplete.

From browsers side, on the Firefox Bugzilla I found the issue documented (12 years ago, still open!): onchange handler not firing when prefill occurs.


Comments

artemi at 2015-08-17
ji

asd at 2015-11-16
asd

Email is not displayed anywhere.
URLs (max 3) starting with http:// or https:// can be used. Use @Name to mention someone.