diff --git a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx index 27ab3bec289..28f5ef00933 100644 --- a/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx +++ b/packages/vuetify/src/components/VOtpInput/VOtpInput.tsx @@ -100,10 +100,11 @@ export const VOtpInput = genericComponent()({ 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()({ 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()({ focusIndex.value = -1 } + function isValidNumber (value: string) { + return props.type === 'number' && !isNaN(Number(value)) + } + provideDefaults({ VField: { color: computed(() => props.color),