CODEWITHSUNDEEP
javascriptalpine.js
shadi ahmadian
shadi ahmadian

Reputation: 37

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

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>

Upvotes: 2

Views: 2199

Answers (2)

y0shim0t0
y0shim0t0

Reputation: 11

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

Upvotes: 0

Shabeer Ahammed
Shabeer Ahammed

Reputation: 173

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

Upvotes: 3

Related Questions