AlpineJs : Cannot read properties of undefined (reading 'focus')

Question

i'm using this code in codepen for OTP input field

this code It works well in [email protected] 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>

Answer 1

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()
    },