[Bug]: PinInput placeholders not displayed after reset value

[Reeska]

Environment

Developement/Production OS: MacOS 15.1.1
Node version: 20.17.0
Package manager: [email protected]
Radix Vue version: 1.9.11
Vue version: 3.5.8
Nuxt version: 3.13.2
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: MacOS 15.1.1
Browser: Brave 1.73.101 Chromium: 131.0.6778.139 (Official Build) (x86_64)

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-nzrqbxnu?file=app.vue,package.json

Steps to reproduce

• Placeholders are displayed for all 4 inputs
• Complete the pin code with a value like 1, 2, 3, 4
• Click reset button
• Placeholders are not displayed

Describe the bug

PinInputInput placeholders are not displayed anymore after resetting PinInputRoot value with [].
I also tried to set values like ['', '', '', ''], but the same behaviour happened.

Minimal code reproduction:

<script setup>
const pinCode = ref([]);
const clear = () => {
  pinCode.value = [];
};
</script>

<template>
  <div>
    <div>
      <p>PinInput :</p>
      <PinInputRoot
        v-model="pinCode"
        placeholder="*"
        class="flex items-center gap-2"
      >
        <PinInputInput v-for="(id, index) in 4" :key="id" :index="index" />
      </PinInputRoot>
    </div>
    <button @click="clear">clear</button>
  </div>
</template>

Expected behavior

Placeholders should be displayed.

Context & Screenshots (if applicable)

[Reeska]

Okay, I found the cause of the issue.

It is caused by handleFocus function in https://github.com/unovue/radix-vue/blob/main/packages/radix-vue/src/PinInput/PinInputInput.vue file :

function handleFocus(event: FocusEvent) {
  const target = event.target as HTMLInputElement
  target.setSelectionRange(1, 1)

  if (!target.value)
    target.placeholder = ''
}

When an user focus the input, placeholder attribute is set to empty string, and only revert to its initial value (given in PinInputRoot prop) on blur event:

function handleBlur(event: FocusEvent) {
  const target = event.target as HTMLInputElement
  nextTick(() => {
    if (!target.value)
      target.placeholder = context.placeholder.value
  })
}

But the placeholder is never restored when pin value is cleared programmatically like just pin.value = [].

I understand why this was done that way: hide the placeholder when user focus the input and they are ready to types a character. I can see this behaviour in different pin input component across different ui library. I also see that sometimes placeholder is kept and not hidden (eg: in Disney+ for profile pin code). So IMO this behaviour should be an opt-in option.