Contenteditable repeated values

[11joselu]

Version

2.2.4

Reproduction link

https://jsfiddle.net/akcbj2z5/1/

Steps to reproduce

Write something into de text box (create a first value)
Click outside text box (need to lose focus)
Create repeated texts: Focus and unfocus again

What is expected?

Do not create repeated first values

What is actually happening?

Repeat values when element lose focus

Same issue using this.$set (objects) :(

[posva]

Adding prevent to blur fixes sometimes your problem. I'm not sure about what to think here because having a content editable makes it sort of two-way binding and then you add the blur event, so it mess it up

edit: added sometimes 😆

[posva]

This is what I'd rather do: https://jsfiddle.net/tyy9e147/

[11joselu]

That works as expected!. Thanks you... feel free to close it if you think is resolved.

Observation: If value model has a string, It does not appear

[posva]

what do you mean by a string? It's always a string

[11joselu]

Sorry, I mean a default value

[posva]

Oh, ok. If you bind a value, it's better to set the initial value there, too, instead of the dom, as with v-model

[11joselu]

With more than +1000 rows, v-model produces performance issues in my app. We are trying to optimize by only updating the value when the on blur event is triggered

[simplesmiler]

@11joselu how about v-model.lazy?

[11joselu]

@simplesmiler Oh! That's works too...Combinating my solution with @posva solution works as expected without delay on keypress events

https://jsfiddle.net/bahcv6qw/2/

[timwis]

Hey folks, just wanted to let you know I ran into this same issue and pulled my hair out for about 24 hours trying to figure it out. Here's my test case. Using :inner-text.prop resolves it for me too, but it is odd that we have to use that in the first place, and I wonder if this might be an issue with the virtualdom implementation.

EDIT: I just discovered that switching ti :inner-text.prop breaks something else for me -- in my particular use case, when the user starts typing, I update the state to activate edit mode in order to change the UI. I do this via an @input binding. The problem seems to be that if the user starts typing, it enters edit mode, but discards what they'd typed before-hand. Assumedly because it hadn't updated that cell in the state, but then updated another piece of state, did a dom diff, and reset the innerText of the node to the current state (replacing what the user had typed). So this is a no-go for me :/ Can this issue be re-opened or should I post a new one?

EDIT2: Here's an even simpler test case