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

swernerx · 2016-03-15T09:21:41Z

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 · 2016-03-15T09:27:17Z

Might be related to this change: df01719

which was about fixing issues with debounced model data.

swernerx · 2016-03-15T09:34:57Z

I forgot: This issue was seen in Chrome v49.

dominiquedutra · 2016-03-15T13:15:26Z

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 · 2016-03-15T13:33:27Z

@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, ''));
            }
        }
    }

swernerx changed the title ~~Input Element Value Filter broken with 1.0.17 (works with 1.0.17)~~ Input Element Value Filter broken with 1.0.17 (works with 1.0.16) Mar 15, 2016

yyx990803 closed this in 20aefd8 Mar 16, 2016

horans mentioned this issue Apr 6, 2016

[1.0.18+]input value clears on blur in nested "v-for" #2626

Closed

vuejs / vue

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

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

swernerx commented Mar 15, 2016

swernerx commented Mar 15, 2016

swernerx commented Mar 15, 2016

dominiquedutra commented Mar 15, 2016

dominiquedutra commented Mar 15, 2016

vuejs / vue

Sponsor vuejs/vue

Join GitHub today

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

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

Comments

swernerx commented Mar 15, 2016

Vue.js version

Steps to reproduce

What is Expected?

What is actually happening?

swernerx commented Mar 15, 2016

swernerx commented Mar 15, 2016

dominiquedutra commented Mar 15, 2016

dominiquedutra commented Mar 15, 2016