estoy usando este código en codepen para el campo de entrada OTP
este código funciona bien en alpine@v2.3.5 pero después de actualizar a v3 me muestra este error
No se pueden leer las propiedades de undefined (leyendo '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>De acuerdo con la guía de actualización de Alpine.js, la compatibilidad con $ refs para elementos creados dinámicamente está obsoleta.
Consulte la guía de actualización de Alpine.js desde V2
Entonces, para trabajar con el código anterior, debe crear los elementos de entrada estáticamente como se muestra a continuación. (El siguiente código es para la plantilla de hoja de laravel)
<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¿Qué hay de vincular la identificación?
$root.querySelector( #pin-${anterior} ) document.getElementById( pin-${anterior} )
<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() },