Input Element Value Filter broken with 1.0.17 (works with 1.0.16)

[swernerx]

Vue.js version

1.0.17

Steps to reproduce

We have developed an input component for formatted numbers (think currencies, percents) which does not work reliable anymore with the newest version. Sometimes it works, sometimes not. The issues happen when interacting with the input field e.g. changing the value in the running application. The filter has a read and write section to deal with parsing and formatting. The filter correctly sends out the changed value - but the formatted value itself does not seem to "reach" the input field. This is probably some timing / race condition issue as it works 50% of the time.

This is the markup of our component - see the v-model section about how we integrated the filter:

<input size="{{this.size ? this.size :'' }}" type="text" required="{{this.required ? this.required :'false' }}"
       maxlength="{{ this.maxlength ? this.maxlength : '' }}" pattern="^[\s0-9\.,€$£]*$"
       placeholder="{{this.placeholder ? this.placeholder :'' }}" name="{{this.name ? this.name : this.id}}"
       id="{{id}}" class="input-currency {{class}}"
       v-model="value | format-currency" v-on:blur="markTainted"/>

This is how a typical filter looks in our application:

  Vue.filter("format-currency", {
    // model -> view: formats the value when updating the input element.
    read: function read(val) {
      return formatNumber(val == null || val === "" || isNaN(val) ? 0 : val, "currency");
    },

    // view -> model: formats the value when writing to the data.
    write: function write(val) {
      return parseToNumber(val);
    }
  });

What is Expected?

It is expected that the input field always contains a formatted number when leaving/bluring the input field.

What is actually happening?

It is only formatted in about 50% of the cases. Sometimes it works. Sometimes not.

[swernerx]

Might be related to this change: df01719

which was about fixing issues with debounced model data.

[swernerx]

I forgot: This issue was seen in Chrome v49.

[dominiquedutra]

I can confirm this. I was just about to report it in.

Just go to the docs, http://vuejs.org/guide/custom-filter.html#Two-way_Filters, and check for yourself.
Try typing something on the input. For me it does not work. The docs use 1.0.17. Latest version of chrome.

[dominiquedutra]

@swernerx My workaround so I dont have to put my production app back to 1.0.16:

<input type="text"
       v-model="value | currencyDisplay"
       v-el:input>

    filters: {
        currencyDisplay: {
            /**
             * When reading the value format in the current currency
             */
            read: function(value) {
                var value = value ? this.formatMoney(this.currency, value) : ''
                this.$els.input.value = value; //######WORKAROUND
            },
            /**
             * When writing the value, strip everything but numbers
             */
            write: function(value) {
                return parseInt(value.replace(/[^0-9]/g, ''));
            }
        }
    }