Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

Type into the input and then click away.

What is expected?

The input should stay filled.

What is actually happening?

The input gets cleared.

I'm just trying to make this Input component with a scoped slot that will expose its focused state. The repro is a minimal snippet from the larger component. Whenever the input loses focus it also gets its text cleared. The input has no v-model bound to it but has support for it. After removing the scoped slot the input works just as expected.

Input.vue

<input  v-memo="[modelValue]"  .......

The issue isn't directly related to slots.

The issue is that CustomInput re-renders when you change the focus, and props.modelValue is still empty, because the parent component didn't use v-model on CustomInput so with the next re-render, the input is emptied again, to sync it with the (still empty) prop.

The input has no v-model bound to it but has support for it.

If using v-model on this component should be optional, then this component has to persist the input's state itself for the use case where the user doesn't use v-model on it.

@lidlanca 's solution is clever and valid, but more of a workaround of the problem of unmanaged state, in my opinion.