fix(PinInput): value now updates correctly when caret at the start of the input (#2059)

Author: max-220

packages/core/src/PinInput/PinInput.test.ts

@@ -30,6 +30,25 @@ describe('given default PinInput', () => {
     expect(inputs[4].element.placeholder).toBe('*')
   })
 
+  describe('caret handling', () => {
+    it('should handle caret at the start of the input', async () => {
+      await userEvent.keyboard('a')
+      inputs[0].element.focus()
+      inputs[0].element.setSelectionRange(0, 0)
+      await userEvent.keyboard('b')
+      expect(inputs.map(i => i.element.value)).toStrictEqual(['b', '', '', '', ''])
+      expect(inputs[1].element).toBe(document.activeElement)
+    })
+
+    it('should handle caret at the end of the input (default focus)', async () => {
+      await userEvent.keyboard('a')
+      inputs[0].element.focus()
+      await userEvent.keyboard('b')
+      expect(inputs.map(i => i.element.value)).toStrictEqual(['b', '', '', '', ''])
+      expect(inputs[1].element).toBe(document.activeElement)
+    })
+  })
+
   describe('after user input', () => {
     beforeEach(async () => {
       await userEvent.keyboard('test')

packages/core/src/PinInput/PinInputInput.vue

@@ -42,7 +42,7 @@ function handleInput(event: InputEvent) {
     return
   }
 
-  target.value = target.value.slice(-1)
+  target.value = event.data ?? ''
   updateModelValueAt(props.index, target.value)
 
   const nextEl = inputElements.value[props.index + 1]