i'm using this code in codepen for OTP input field
this code It works well in alpine@v2.3.5 but after upgrade to v3 show me this error
Cannot read properties of undefined (reading 'focus')
<div
x-data="pinHandler()"
x-init="$nextTick(() => { $refs[0].focus() })"
class="flex items-start justify-center min-h-screen w-full bg-white p-16 pt-64">
<div class="relative p-10 pb-8 bg-indigo-500 mx-auto max-w-md rounded-lg shadow-2xl z-50">
<label
for="enter-pin"
class="block text-3xl mb-2 text-white font-extrabold text-center">Enter PIN</label>
<form
id="enter-pin"
class="flex flex-row flex-wrap justify-center space-x-4"
@submit.prevent="handleSubmit()"
@paste.prevent="handlePaste($event)">
<template x-for="(input, index) in Array.from({ length: length })" :key="index">
<input
@input.prevent="handleInput($event.target)"
@keydown.backspace="$event.target.value || focusPreviousRef($event.target.getAttribute('x-ref'))"
autocomplete="off"
:aria-label="`Pin ${index + 1}`"
data-lpignore="true"
:x-ref="index"
class="w-12 mb-4 rounded border border-gray-200 p-3 text-center appearance-none"
type="text"
maxlength="1">
</template>
</form>
</div>
<p class="absolute bottom-0" x-text="`value: ${value}`"></p>
</div>
According to Alpine.js upgrade guide, the $refs support for dynamically created elements are deprecated.
See Alpine.js Upgrade guide from V2
So to work the above code, you should create the input elements statically like below. (The below code is for laravel blade template)
<form id="enter-pin" class="flex flex-row flex-wrap justify-center space-x-4" x-on:submit.prevent="handleSubmit()" x-on:paste.prevent="handlePaste($event)">
@for($i = 1; $i <= 6; $i++)
<input x-on:input.prevent="handleInput($event.target)" x-on:keydown.backspace="$event.target.value || focusPreviousRef($event.target.getAttribute('x-ref'))" autocomplete="off" data-lpignore="true" x-ref="{{ $i }}" class="w-12 mb-4 rounded border border-gray-200 p-3 text-center appearance-none" type="text" maxlength="1">
@endfor
How about bind the id?
$root.querySelector(#pin-${previous})
document.getElementById(pin-${previous})
<input
@input.prevent="handleInput($event.target)"
@keydown.backspace="$event.target.value || focusPreviousRef(index)"
autocomplete="off"
:aria-label="`Pin ${index + 1}`"
data-lpignore="true"
{{-- :x-ref="index" --}}
:id="`pin-${index}`"
class="w-12 mb-4 rounded border border-gray-200 p-3 text-center appearance-none"
type="text"
maxlength="1">
----
focusPreviousRef(index) {
const previous = parseInt(index, 10) - 1
previous_element=this.$root.querySelector(`#pin-${previous}`);
previous_element.focus()
previous_element.select()
},