From 2ff8ffef3c1b42f47be4c019e730f1f27f76c180 Mon Sep 17 00:00:00 2001
From: zernonia <59365435+zernonia@users.noreply.github.com>
Date: Mon, 30 Dec 2024 13:18:19 +0800
Subject: [PATCH] fix(PinInput): placeholder not showing after reseting the
 value programatically (#1530)

* fix(PinInput): placeholder not showing after reseting the value programatically

* test: include test

Co-authored-by: antfu <Reeska@Reeska.noreply.github.com>
---
 .../radix-vue/src/PinInput/PinInput.test.ts   | 24 ++++++++++++++++++
 .../radix-vue/src/PinInput/PinInputInput.vue  | 25 +++++++++++++------
 .../src/PinInput/story/_PinInput.vue          |  5 ++++
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/packages/radix-vue/src/PinInput/PinInput.test.ts b/packages/radix-vue/src/PinInput/PinInput.test.ts
index 9e5ff6b7a..76ab91204 100644
--- a/packages/radix-vue/src/PinInput/PinInput.test.ts
+++ b/packages/radix-vue/src/PinInput/PinInput.test.ts
@@ -22,6 +22,14 @@ describe('given default PinInput', () => {
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
 
+  it('should display input placeholders', () => {
+    expect(inputs[0].element.placeholder).toBe('') // first input was focused thus not showing placeholder
+    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('after user input', () => {
     beforeEach(async () => {
       await userEvent.keyboard('test')
@@ -143,6 +151,22 @@ describe('given default PinInput', () => {
     it('should emit \'complete\' with the result', () => {
       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')
+        await button.trigger('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('*')
+      })
+    })
   })
 })
 
diff --git a/packages/radix-vue/src/PinInput/PinInputInput.vue b/packages/radix-vue/src/PinInput/PinInputInput.vue
index 3aff8bdb9..3e3423c8b 100644
--- a/packages/radix-vue/src/PinInput/PinInputInput.vue
+++ b/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',
@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<PinInputInputProps>(), {
 
 const context = injectPinInputRootContext()
 const inputElements = computed(() => Array.from(context.inputElements!.value))
+const currentValue = computed(() => context.modelValue.value[props.index])
 
 const disabled = computed(() => props.disabled || context.disabled.value)
 const isOtpMode = computed(() => context.otp.value)
@@ -48,6 +49,14 @@ function handleInput(event: InputEvent) {
     nextEl.focus()
 }
 
+function resetPlaceholder() {
+  const target = currentElement.value as HTMLInputElement
+  nextTick(() => {
+    if (!target.value)
+      target.placeholder = context.placeholder.value
+  })
+}
+
 function handleKeydown(event: KeyboardEvent) {
   useArrowNavigation(event, document.activeElement as HTMLElement, undefined, {
     itemsArray: inputElements.value,
@@ -91,11 +100,7 @@ function handleFocus(event: FocusEvent) {
 }
 
 function handleBlur(event: FocusEvent) {
-  const target = event.target as HTMLInputElement
-  nextTick(() => {
-    if (!target.value)
-      target.placeholder = context.placeholder.value
-  })
+  resetPlaceholder()
 }
 
 function handlePaste(event: ClipboardEvent) {
@@ -142,6 +147,12 @@ function updateModelValueAt(index: number, value: string) {
   context.modelValue.value = removeTrailingEmptyStrings(tempModelValue)
 }
 
+watch(currentValue, () => {
+  if (!currentValue.value) {
+    resetPlaceholder()
+  }
+})
+
 onMounted(() => {
   context.onInputElementChange(currentElement.value as HTMLInputElement)
 })
@@ -161,7 +172,7 @@ onUnmounted(() => {
     :inputmode="isNumericMode ? 'numeric' : 'text'"
     :pattern="isNumericMode ? '[0-9]*' : undefined"
     :placeholder="context.placeholder.value"
-    :value="context.modelValue.value[index]"
+    :value="currentValue"
     :disabled="disabled"
     :data-disabled="disabled ? '' : undefined"
     :data-complete="context.isCompleted.value ? '' : undefined"
diff --git a/packages/radix-vue/src/PinInput/story/_PinInput.vue b/packages/radix-vue/src/PinInput/story/_PinInput.vue
index 1c4647818..a76b4d2be 100644
--- a/packages/radix-vue/src/PinInput/story/_PinInput.vue
+++ b/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,8 @@ const value = ref<string[]>([])
       :index="index"
     />
   </PinInputRoot>
+
+  <button @click="value = []">
+    Reset value
+  </button>
 </template>