Skip to content

With v-model.trim on custom component, trimmed value does not flow back to the component #5847

@ThomHurks

Description

@ThomHurks

Version

2.3.4

Reproduction link

https://jsfiddle.net/p8dvkqmb/32/

Steps to reproduce

Originally, I had a textarea with v-model.trim on it. This worked great! However, I added extra fancy controls to the textarea and decided to make a custom component so I can reuse and share it easily.

After this, I noticed two odd behaviours:

  • As the title says, if you type "a" and unfocus/focus the textarea in the custom component, the whitespace is still there, it's not trimmed. With my old plain textarea, an unfocus/focus clears the extreaneous whitespace.
  • In the parent component, the variable that holds your text is trimmed correctly. So it seems that v-model.trim on a custom component does trim the value that comes with the "input" event from within the component, but the trimmed value does not flow back to the child component through the value prop.
  • Another strange behaviour is that when you type "ab" and remove the "b", the extra whitespace is instantly trimmed. This can be annoying when typing and using backspace when you make a typo. The "plain" textarea does not have this behaviour when using v-model.trim on it.

What is expected?

When implementing a custom component containing a textarea that supports v-model as the docs describe and using v-model.trim on it the behaviour of the textarea should match that of using v-model.trim on a plain textarea.

What is actually happening?

The textarea within the custom component has different behaviour than a plain textarea. Specifically, the trimmed value is seen by the parent component that uses v-model.trim on the child component, but the trimmed value does not flow back to the child component. You can see that after unfocus/focus the whitespace is still there, while with a plain textarea it will be trimmed.

Additionally, when you type "ab" and remove the "b", the remaining whitespace is instantly removed, which is annoying behaviour when typing and using backspace to correct a typo for example, while the original plain textarea does not have this behaviour.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions