[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.

[TwT-L]

After resetting the component, the cursor did not return to the first input box. Is there any way to focus on the first box?

[Reeska]

After resetting the component, the cursor did not return to the first input box. Is there any way to focus on the first box?

Yes you can, you have to save ref to all digit inputs:

<script lang="ts" setup>
const inputs = ref<ComponentPublicInstance[]>([])
const pin = ref<string[]>([])

const focusDigit = (index: number) => {
  inputs.value[index]?.$el.focus()
}

const reset = () => {
  pin.value = []
  focusDigit(0)
}
</script>

<template>
  <PinInputRoot
    class="flex gap-2 items-center mt-8 !w-fit"
    v-model="pin"
  >
    <PinInputInput
      v-for="(id, index) in 4"
      :ref="
        el => {
          if (el && '$el' in el) {
            inputs[index] = el
          }
        }
      "
      :key="id"
      :index="index"
    />
  </PinInputRoot>

  <button @click="reset">reset</button>
</template>