fix(PinInput): issues with deleting numeric values when type is number (#1965)

J-Michalek · Jakub · web-flow · commit 446a9df2f6a9 · 2025-06-07T18:54:58.000+08:00
* fix(PinInput): issues with deleting numeric values when type is number

* fix(PinInput): allow 0 as valid value in numeric mode

* test(pin-input): add more cases for type number

* refactor(pin-input-input): remove unused computed

---------

Co-authored-by: Jakub &lt;jakub.michalek@freelo.io&gt;
diff --git a/packages/core/src/PinInput/PinInput.test.ts b/packages/core/src/PinInput/PinInput.test.ts
@@ -217,5 +217,39 @@ describe('give PinInput type=number', async () => {
     it('should emit \'complete\' with the result', () => {
       expect(wrapper.emitted('complete')?.[0]?.[0]).toStrictEqual([1, 2, 3, 4, 5])
     })
+
+    it('should delete the last input when pressing Backspace', async () => {
+      await inputs[4].trigger('keydown', { key: 'Backspace' })
+      expect(inputs[4].element).toBe(document.activeElement)
+      expect(inputs.map(i => i.element.value)).toStrictEqual(['1', '2', '3', '4', ''])
+    })
+
+    it('should delete all values input when pressing Backspace for each input', async () => {
+      // Delete the last value
+      await inputs[4].trigger('keydown', { key: 'Backspace' })
+      // Press again to move focus to the previous input
+      await inputs[4].trigger('keydown', { key: 'Backspace' })
+      await inputs[3].trigger('keydown', { key: 'Backspace' })
+      await inputs[2].trigger('keydown', { key: 'Backspace' })
+      await inputs[1].trigger('keydown', { key: 'Backspace' })
+      await inputs[0].trigger('keydown', { key: 'Backspace' })
+
+      expect(inputs[0].element).toBe(document.activeElement)
+      expect(inputs.map(i => i.element.value)).toStrictEqual(['', '', '', '', ''])
+    })
+  })
+
+  describe('after user input numeric word consisting only of zeros', () => {
+    beforeEach(async () => {
+      await userEvent.keyboard('00000')
+    })
+
+    it('should populate the word in each box', () => {
+      expect(inputs.map(i => i.element.value)).toStrictEqual(['0', '0', '0', '0', '0'])
+    })
+
+    it('should emit \'complete\' with the result', () => {
+      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
@@ -26,7 +26,6 @@ const currentValue = computed(() => context.currentModelValue.value[props.index]
 
 const disabled = computed(() => props.disabled || context.disabled.value)
 const isOtpMode = computed(() => context.otp.value)
-const isNumericMode = computed(() => context.type.value === 'number')
 const isPasswordMode = computed(() => context.mask.value)
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
@@ -38,7 +37,7 @@ function handleInput(event: InputEvent) {
     return
   }
 
-  if (isNumericMode.value && !/^\d*$/.test(target.value)) {
+  if (context.isNumericMode.value && !/^\d*$/.test(target.value)) {
     target.value = target.value.replace(/\D/g, '')
     return
   }
@@ -122,7 +121,7 @@ function handleMultipleCharacter(values: string) {
   for (let i = initialIndex; i < lastIndex; i++) {
     const input = inputElements.value[i]
     const value = values[i - initialIndex]
-    if (isNumericMode.value && !/^\d*$/.test(value))
+    if (context.isNumericMode.value && !/^\d*$/.test(value))
       continue
 
     tempModelValue[i] = value
@@ -145,7 +144,21 @@ function removeTrailingEmptyStrings(input: PinInputValue<typeof context.type.val
 
 function updateModelValueAt(index: number, value: string) {
   const tempModelValue = [...context.currentModelValue.value] as PinInputValue<typeof context.type.value>
-  tempModelValue[index] = isNumericMode.value ? +value : value
+
+  if (context.isNumericMode.value) {
+    const num = +value
+
+    if (value === '' || isNaN(num)) {
+      delete tempModelValue[index]
+    }
+    else {
+      tempModelValue[index] = num
+    }
+  }
+  else {
+    tempModelValue[index] = value
+  }
+
   context.modelValue.value = removeTrailingEmptyStrings(tempModelValue)
 }
 
@@ -171,8 +184,8 @@ onUnmounted(() => {
     :as-child="asChild"
     :autocomplete="isOtpMode ? 'one-time-code' : 'false'"
     :type="isPasswordMode ? 'password' : 'text'"
-    :inputmode="isNumericMode ? 'numeric' : 'text'"
-    :pattern="isNumericMode ? '[0-9]*' : undefined"
+    :inputmode="context.isNumericMode.value ? 'numeric' : 'text'"
+    :pattern="context.isNumericMode.value ? '[0-9]*' : undefined"
     :placeholder="context.placeholder.value"
     :value="currentValue"
     :disabled="disabled"
diff --git a/packages/core/src/PinInput/PinInputRoot.vue b/packages/core/src/PinInput/PinInputRoot.vue
@@ -49,6 +49,7 @@ export interface PinInputRootContext<Type extends PinInputType = 'text'> {
   isCompleted: ComputedRef<boolean>
   inputElements?: Ref<Set<HTMLInputElement>>
   onInputElementChange: (el: HTMLInputElement) => void
+  isNumericMode: ComputedRef<boolean>
 }
 
 export const [injectPinInputRootContext, providePinInputRootContext]
@@ -92,8 +93,9 @@ function onInputElementChange(el: HTMLInputElement) {
   inputElements.value.add(el)
 }
 
+const isNumericMode = computed(() => props.type === 'number')
 const isCompleted = computed(() => {
-  const modelValues = currentModelValue.value.filter(i => !!i)
+  const modelValues = currentModelValue.value.filter(i => !!i || (isNumericMode.value && i === 0))
   return modelValues.length === inputElements.value.size
 })
 
@@ -114,6 +116,7 @@ providePinInputRootContext({
   isCompleted,
   inputElements,
   onInputElementChange,
+  isNumericMode,
 })
 </script>
 
