UInput :value not working in v2.18.5

[vanling]

tldr

When using nuxt UI v2.18.5 or higher -> <UInput value="'12714274'" readonly /> change it to <UInput :model-value="'12714274'" readonly />

---

Version

edit: v2.18.5

Reproduction

https://stackblitz.com/edit/nuxt-ui-uds7la?file=app.vue

Description

So i have a few grouped form inputs and noticed all values being empty since last update, reverted back to 2.18.4 and worked again.

(👀 or you can tell me im using it wrong)

Why i am using :value= ?

<UInput
          :value="firstname"
          @input="$emit('update:firstname', $event.target.value)"
        />
        <UInput
          :value="lastname"
          @input="$emit('update:lastname', $event.target.value)"
        />

and using

<AccountFormDetails
    v-model:firstname="formState.firstname"
    v-model:lastname="formState.lastname"
/>

Additional context

No response

Logs

no logs,no errors

edit: added repro edit: pinpointed on 2.18.5, this happened between 18.4 and 18.5

[vanling]

https://github.com/nuxt/ui/commit/82313e862cbf21ae631156af4cd057f1383db634

i will try locally update: yes, { ...attrs, value: modelValue }" overwrites the value it gets

edit: Im currently trying to work around this by just using the v-model

Related issue and pr: https://github.com/nuxt/ui/issues/1996 - https://github.com/nuxt/ui/pull/2047

[tobychidi]

I think this is the reason my u-input no longer works with a controller like zag-js. I need it for tags Input, pin input and others.

[benjamincanac]

You should use a v-model like described on: https://ui.nuxt.com/dev/components/input. If you want more control you can use model-value and @update:model-value: https://vuejs.org/guide/extras/render-function.html#v-model

[tobychidi]

But my zag-js is broken @benjamincanac 🥲. What do I do?

<u-input
         v-bind="api.getInputProps()"
         size="sm"
         :color
         :placeholder
         :autofocus
         :disabled
         :required />

This used to work.

[benjamincanac]

@romhml What do you think? I don't see how https://github.com/nuxt/ui/pull/2047/files could have broken this? 🤔

[vanling]

Thanks @benjamincanac, The option to use value, for me was an undocumented "feature" that I loved. But you are right, in my case using modelValue would do the trick

Might be that overwriting attrs.value, that was introduced in https://github.com/nuxt/ui/pull/2047, with empty/unused modelValue could break things for more people who thought this worked before, and like me thought it was sort of an replacement. Same for this guy in https://github.com/nuxt/ui/issues/2104 people think html input attributes can be used.

[vanling]

Changed mine to, worked great.

<UInput
        :model-value="name"
        @update:model-value="(value) => $emit('update:name', value)"
      />

Also tried the v-model, but needs computed values for the props, which worked, but i like the :model-value a bit more.

<UInput v-model="name" />
---
const name = computed({
  get: () => props.name,
  set: value => $emit('update:name', value),
})

[vanling]

But my zag-js is broken. What do I do?

<u-input
         v-bind="api.getInputProps()"
         :required />

This used to work.

@tobychidi you could try to pick the value from api.getInputProps() and use that as a model-value.

[vanling]

@benjamincanac since value= cant be used but other html-input attributes like autocomplete= can. Shall i make a pr for documentation change?

adding this

::callout{icon="i-heroicons-exclamation-triangle-20-solid"}
We recommend using `v-model` for managing the input's reactivity. However, if needed, you cannot bind the input value using `:value`. Instead, bind the input value using `:model-value` and listen for changes using `@update:model-value` to ensure proper reactivity and updates.
:: 

or

We recommend using `v-model` for reactivity. If needed, use `:model-value` and `@update:model-value` instead of `:value` for proper updates.

[benjamincanac]

I don't think it's necessary as it's written all over the docs to use v-model or model-value already and nowhere to use :value.

[vanling]

Ok 👍 , Then i hope this post will help other people who think they can use every html attribute/prop except value.

example: When using nuxt UI v2.18.5 or higher -> <UInput value="'12714274'" readonly /> change it to <UInput :model-value="'12714274'" readonly />