The forced local update from a defineModel setter results in unexpected input field values

[steven-klein]

Vue version

3.4.32+

Link to minimal reproduction

https://play.vuejs.org/#eNqFUslu2zAQ/ZUBL5IBRwKanlzZQFPkkAJd0OZWFoUgj1SmFElwUVwI+vcMKctZEDgnie/N8mbmjeyjMcUQkG1Y5RorjAeHPhiQteq2nHnH2Y4r0RttPYxgsYUJWqt7yCgtO1FXtcMbZYI/kkV5QmL97ANXXDVaOQ8ihW1jrTzLVlxV5dyaGtHDY29k7ZFeAJXZ3f43CDX0QXpxca/tHoZaBtxUpZlDHlsPF73eoyy8FT2JT404g3IpNY7H5tM0Z1flk25sTeOSxFZ0xZ3TinYyxkTOGt0bIdF+M17QCJxtIDGRq6XU958T5m3A9YI3f7H59wp+5w4R4+y7RYd2QM5OnK9th6Q40tc/v+KB/k8kjRYkRZ8hf6DTMkSNc9hVUHuS/SQuqb1JJxOqu3XXB4/KLUNFoTFySvGc0eE+nRn9Ue5l8T7lcTXRFp9d/g1nzZb4le62Bvq432SNPbZC4ZcIVo6uqbp17EdnpaQ8CaBiG8iHFWx3iyLRQh4rpPuvFhTIaD5YBUPCczJcBEnr/LOwywDnDUk+mi109BpNkr5kM09GjYOlyyTTvbTXnwFtXDbthDZWXL5j0wNI2SpB

Steps to reproduce

Use defineModel with a modifier like trim applied in the set transformer. Bind the model to a text input and type a multi-word value into the input.

What is expected?

The trim modifier syncs the trimmed value back to the parent without updating the value attribute on the input.

What is actually happening?

The input value is also updated to the trimmed value, which prevents a user from adding spaces.

System Info

No response

Any additional comments?

Looking at commit de174e1 this may now be the expected behavior, but is a bit unintuitive given how v-model modifiers have worked in the past.

The documentation on modifiers and transformers appears to suggest that you should be able to apply a trim modifier in this manner.

[edison1105]

a workaround

<input v-model.lazy="model" type="text" />

see Playground