[Mise] Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

In this lesson, we learn how to retrieve a DOM element via the x-ref directive in Alpine JS, which gives us a reference to the element it is applied on. In our case, an input field.

We can then use the $refs object, and reach for the ref we need to target.

This allows us to trigger the focus state of the input field, with the .focus() method.

 

<div x-data="{name: ''}">
  <label>Your name</label>
  <!-- ref to a dom node-->
  <input x-ref="nameInput" type="text" x-model="name">
  <p>Hi, my name is <span x-text="name || '_______________'"></span>! 👋</p>
   <!-- get ref and call the method-->
  <button @click="$refs.nameInput.focus()">set focus</button>
</div>