fix(PinInput): allow populating inputs by password manager's autofill (#2218)

kricsleo · web-flow · commit eba273fc41b1 · 2025-10-21T20:33:11.000+08:00
diff --git a/packages/core/src/PinInput/PinInput.test.ts b/packages/core/src/PinInput/PinInput.test.ts
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { axe } from 'vitest-axe'
+import { nextTick } from 'vue'
 import PinInput from './story/_PinInput.vue'
 
 describe('given default PinInput', () => {
@@ -271,4 +272,21 @@ describe('give PinInput type=number', async () => {
       expect(wrapper.emitted('complete')?.[0]?.[0]).toStrictEqual([0, 0, 0, 0, 0])
     })
   })
+
+  describe('autofill', () => {
+    it('should populate the opt code in each box', async () => {
+      /**
+       * https://github.com/unovue/reka-ui/issues/2210
+       * Password managers (like 1Password, Bitwarden, etc.) fill PIN inputs with `input` events
+       */
+      for (const input of inputs) {
+        input.setValue('0')
+        input.trigger('input', { data: undefined })
+      }
+      await nextTick()
+
+      expect(inputs.map(i => i.element.value)).toStrictEqual(['0', '0', '0', '0', '0'])
+      expect(wrapper.emitted('complete')?.[0]?.[0]).toStrictEqual([0, 0, 0, 0, 0])
+    })
+  })
 })
diff --git a/packages/core/src/PinInput/PinInputInput.vue b/packages/core/src/PinInput/PinInputInput.vue
@@ -42,7 +42,7 @@ function handleInput(event: InputEvent) {
     return
   }
 
-  target.value = event.data ?? ''
+  target.value = event.data || target.value.slice(-1)
   updateModelValueAt(props.index, target.value)
 
   const nextEl = inputElements.value[props.index + 1]
diff --git a/packages/core/src/PinInput/PinInputRoot.vue b/packages/core/src/PinInput/PinInputRoot.vue
@@ -92,7 +92,8 @@ const dir = useDirection(propDir)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue ?? [] as any,
-  passive: (props.modelValue === undefined) as false,
+  passive: true,
+  deep: true,
 }) as Ref<PinInputValue<Type>>
 
 const currentModelValue = computed(() => Array.isArray(modelValue.value) ? [...modelValue.value] : [])

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ function handleInput(event: InputEvent) {`
`42`	`42`	`return`
`43`	`43`	`}`
`44`	`44`
`45`		`- target.value = event.data ?? ''`
	`45`	`+ target.value = event.data \|\| target.value.slice(-1)`
`46`	`46`	`updateModelValueAt(props.index, target.value)`
`47`	`47`
`48`	`48`	`const nextEl = inputElements.value[props.index + 1]`