fix(PinInput): display placeholders after resetting pin value programmatically

Author: Reeska

packages/radix-vue/src/PinInput/PinInput.test.ts

@@ -144,6 +144,23 @@ describe('given default PinInput', () => {
       expect(wrapper.emitted('complete')?.[0]?.[0]).toStrictEqual(['a', 'p', 'p', 'l', 'e'])
     })
   })
+
+  describe('after resetting value', async () => {
+    beforeEach(async () => {
+      await userEvent.keyboard('apple')
+      const button = wrapper.find('button').element
+      button.focus()
+      button.click()
+    })
+
+    it('should display input placeholders', () => {
+      expect(inputs[0].element.placeholder).toBe('*')
+      expect(inputs[1].element.placeholder).toBe('*')
+      expect(inputs[2].element.placeholder).toBe('*')
+      expect(inputs[3].element.placeholder).toBe('*')
+      expect(inputs[4].element.placeholder).toBe('*')
+    })
+  })
 })
 
 describe('give PinInput type=number', async () => {

packages/radix-vue/src/PinInput/PinInputInput.vue

@@ -12,7 +12,7 @@ export interface PinInputInputProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
 
 const props = withDefaults(defineProps<PinInputInputProps>(), {
   as: 'input',
@@ -98,6 +98,13 @@ function handleBlur(event: FocusEvent) {
   })
 }
 
+watch(context.modelValue, async () => {
+  await nextTick()
+  const target = currentElement.value as HTMLInputElement
+  if (!target.value && target !== document.activeElement)
+    target.placeholder = context.placeholder.value
+})
+
 function handlePaste(event: ClipboardEvent) {
   event.preventDefault()
   const clipboardData = event.clipboardData

packages/radix-vue/src/PinInput/story/PinInput.story.vue

@@ -4,6 +4,10 @@ import { PinInputInput, PinInputRoot } from '..'
 import { Label } from '@/Label'
 
 const value = ref<string[]>([])
+const button = [
+  'mt-4 text-violet11 shadow-blackA7 hover:bg-mauve3 inline-flex h-[35px] items-center justify-center rounded-[4px]',
+  'bg-white px-[15px] font-medium leading-none shadow-[0_2px_10px] focus:shadow-[0_0_0_2px] focus:shadow-black focus:outline-none',
+]
 </script>
 
 <template>
@@ -18,6 +22,7 @@ const value = ref<string[]>([])
         <PinInputRoot
           id="otp"
           v-model="value"
+          placeholder="○"
           class="flex gap-2 items-center"
           @complete="e => console.log(e.join(''))"
         >
@@ -28,6 +33,13 @@ const value = ref<string[]>([])
             :index="index"
           />
         </PinInputRoot>
+
+        <button
+          :class="button"
+          @click="value = []"
+        >
+          Reset value
+        </button>
       </div>
     </Variant>
   </Story>

packages/radix-vue/src/PinInput/story/_PinInput.vue

@@ -15,6 +15,7 @@ const value = ref<string[]>([])
   <PinInputRoot
     v-bind="{ ...props, ...useEmitAsProps(emits) }"
     v-model="value"
+    placeholder="*"
     class="flex gap-2 items-center"
   >
     <PinInputInput
@@ -24,4 +25,11 @@ const value = ref<string[]>([])
       :index="index"
     />
   </PinInputRoot>
+
+  <button
+    class="reset-button"
+    @click="value = []"
+  >
+    Reset value
+  </button>
 </template>