QInput v-model.trim is too eager

[dsl101]

Software version

Quasar: 0.15.
OS:
Node:
NPM:
Browsers:
iOS:
Android:
Any other software related to your bug:

JsFiddle (for Quasar v0.15+ only)

https://codepen.io/anon/pen/WMBvZR

What did you get as the error?

When editing a text input with v-model.trim="data", it is very awkward to delete words that are separated by spaces, as the trim() happens on every change and therefore 'consumes' the space that would separate words.

E,g. type "Step 1" into the text input and then delete the '1' and replace it with a '2". For a plain input element, this ends with "Step 2", but for q-input it ends with "Step2" unless great care is taken.

What were you expecting?

q-input would behave the same as input, and not erase spaces during editing.

[rstoenescu]

I see no difference. You haven't specified the browser (as requested in the Github ticket template) so assuming you are using Google Chrome.

PS: .trim is a v-model directive modifier offered by Vue, not by Quasar.

[dsl101]

Did you actually follow my notes though? Type "Step 1" then delete the 1 and see the difference.

[dsl101]

Also see this. I did start with Vue. I've tried it in many different browsers (Chrome, FF, Safari, IE) and see the same in all. Note in the pen linked from that Vue forum post, the model is trimmed on input, but the actual input box retains the trailing space, so that subsequent typing doesn't lose the space.

[rstoenescu]

While this works for native inputs, it cannot work with v-model on components. This is due to how Vue works.

Explanation:

1. v-model is equivalent to <q-input :value="model" @input="val => { model = val}"
2. when using trim modifier with v-model, you have the following sequence:
   • you type "Step 1" a series of @input events are triggered, each time trimming and updating the model (eventually setting it to "Step 1")
   • Every @input Vue event triggers a QInput re-render with the new value (due to :value having a new value for it)
   • you delete "1" -> model is trimmed and set to "Step" instead of "Step " (notice the space)
   • QInput gets re-rendered with the trimmed value, which is "Step"

Use lazy loading (check docs, it explains it very well) OR an equivalent :value - @input to fit your needs.

[dsl101]

That's a shame. For completeness, this is the Vue forum post I originally sent this too (my previous link was bad), where it was pointed out the native component works as expected. The workaround I've been using:

<q-input
  v-model="v"
  @blur="v = v.trim()"
/>

isn't too bad I guess.