fix otp code paste in mobile browsers (#6197)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
This commit is contained in:
Alexander Onnikov 2024-07-31 15:06:05 +07:00 committed by GitHub
parent 623649f6d9
commit febefacef9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 13 deletions

View File

@ -31,7 +31,6 @@
on:change
on:keyup
on:input
maxlength={1}
inputmode="numeric"
autocomplete="off"
placeholder=""

View File

@ -81,20 +81,26 @@
if (value == null || value === '') return
const index = fields.findIndex(({ id }) => id === target.id)
if (index === -1) return
if (value.length === fields.length) {
pasteOtpCode(value)
} else {
const index = fields.findIndex(({ id }) => id === target.id)
if (index === -1) return
if (Object.values(otpData).every((v) => v !== '')) {
void validateOtp()
return
}
target.value = value[0]
const nextField = fields[index + 1]
if (nextField === undefined) return
if (Object.values(otpData).every((v) => v !== '')) {
void validateOtp()
return
}
const nextInput = formElement?.querySelector(`input[name="${nextField.name}"]`) as HTMLInputElement
if (nextInput != null) {
nextInput.focus()
const nextField = fields[index + 1]
if (nextField === undefined) return
const nextInput = formElement?.querySelector(`input[name="${nextField.name}"]`) as HTMLInputElement
if (nextInput != null) {
nextInput.focus()
}
}
}
@ -139,9 +145,15 @@
if (e.clipboardData == null) return
const text = e.clipboardData.getData('text')
pasteOtpCode(text)
}
function pasteOtpCode (text: string): boolean {
const digits = text.split('').filter((it) => it !== ' ')
if (digits.length !== fields.length) return
if (digits.length !== fields.length) {
return false
}
let focusName: string | undefined = undefined
@ -160,6 +172,8 @@
if (Object.values(otpData).every((v) => v !== '')) {
void validateOtp()
}
return true
}
$: if (formElement != null) {