Проблема с автоматическим заполнением OTP в Chrome/IE/Firefox на устройстве Android ⇐ Javascript

[Anonymous]

Я работаю над проектом Vue2 и использую собственный компонент OTP, который находится внутри, используя тег ввода. В методе смонтированного жизненного цикла я вставляю autocomplete="one-time-code"
в ios - это автоматическое заполнение OTP.

Код: Выделить всё

export default{
name:"dummyOtp",
components:{
"custom-input-otp": customInputOtp
}

data(){
otp:null,
webOtpAbort: null,
complete: false,
countDown: null

},
mounted(){

setTimeout(()=>{
this.focusInput();
this.otpAutofill();
});

},
methods:{
focusInput(){
this.nextTick(()=>{
const OPT_LENGTH = 6;
const first = this.$refs.inputOtp.$refs.otpDigit1?.[0]; // otpDigit1 is input ref
first.setAttribute(''autocomplete', 'one-time-code');
first.focus()

const onPaste = (e)=>{
const text = (e.clipboardData || window.clipboardData)?.getData('text') || '';
const code = (text.match(/\d/g)|| []).join('').slice(0, OPT_LENGTH);
if(code.length === OPT_LENGTH){
e.preventDefault();
this.otp = code;
this.setOtp(code);
this.onComplete(true);
}
first.removeEventListener('paste', onPaste);
first.addEventListener('paste', onPaste, {passive: false});

}

}},
otpAutoFill(){
if(this.complete) return;
this.tryWebOtp();
},
async tryWebOtp(){
try{
this.webOtpAbort = new AbortController();
const msLeft = Math.max(0, this.countdown, 60000);
const timeoutMs = math.min(msLeft, 60000);
const timeoutId = setTimeout(()=> this.webOtpAbort.abort(), timeoutMs);
const result = await navigator.credentials.get({
otp:{transport: ['sms']},
signal: this.webOtpAbort.signal,
});
clearTimeout(timeoutId);
if(result?.code){
this.setOtp(result.code);
this.submitOtp(); // this submit the otp
}
}catch(err){console.log(err)}
},
setOtp(code){
if(!code) return;
const refs = this.$refs.inputOtp.$refs;
for(let i=0; i 

Подробнее здесь: [url]https://stackoverflow.com/questions/79791758/auto-fill-otp-issue-in-chrome-ie-firefox-on-android-device[/url]