fix(VOtpInput): paste string to input number (#19345)

fixes #18931

Co-authored-by: Son Tran <stt@cct-technology.com>
Co-authored-by: John Leider <john@vuetifyjs.com>

packages/vuetify/src/components/VOtpInput/VOtpInput.tsx

@@ -100,10 +100,11 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
     function onInput () {
       // The maxlength attribute doesn't work for the number type input, so the text type is used.
       // The following logic simulates the behavior of a number input.
-      if (props.type === 'number' && /[^0-9]/g.test(current.value.value)) {
+      if (isValidNumber(current.value.value)) {
         current.value.value = ''
         return
       }
+
       const array = model.value.slice()
       const value = current.value.value
 
@@ -165,7 +166,11 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
       e.preventDefault()
       e.stopPropagation()
 
-      model.value = (e?.clipboardData?.getData('Text') ?? '').split('')
+      const clipboardText = e?.clipboardData?.getData('Text') ?? ''
+
+      if (!isValidNumber(clipboardText)) return
+
+      model.value = clipboardText.split('')
 
       inputRef.value?.[index].blur()
     }
@@ -186,6 +191,10 @@ export const VOtpInput = genericComponent<VOtpInputSlots>()({
       focusIndex.value = -1
     }
 
+    function isValidNumber (value: string) {
+      return props.type === 'number' && !isNaN(Number(value))
+    }
+
     provideDefaults({
       VField: {
         color: computed(() => props.color),