$dispatch select change event to update button focus

Question

Hello I have a select element I would like to set a buttons focus on change. My code is as follows. I have included a $dispatch but not sure I am doing it correctly

function data() {
  return {
    open: "tab 1",
    tabs: [
      {
        value: "tab 1",
        text: "Text for tab 1"
      },
      {
        value: "tab 2",
        text: "Text for tab 2"
      },
      {
        value: "tab 3",
        text: "Text for tab 3"
      }
    ]
  };
}

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<div x-data="data()" x-init="select = open, $watch('select', value => console.log(value))" $watch="('select', value => console.log(select))" class="w-full h-screen bg-gray-200 flex items-center justify-center">
  <div class="flex flex-wrap gap-2">
    <template x-for="btn in tabs" :key="btn.value">
      <button x-on:selectchange=":focus = $event.detail.value === btn.value" x-text="btn.value" @click="open = btn.value, select = btn.value" class="bg-blue-400 px-6 py-4 rounded-sm border-b-4 border-blue-800 uppercase tracking-widest font-bold " :class="{'bg-blue-800 text-blue-300' : btn.value === open}">toggle</button>
    </template>
    <div class="w-full">
      <form action="">
        <select class="w-full appearance-none px-6 py-4 border border-blue-800 rounded-sm" name="" id="" x-model="select">
          <template x-for="opt in tabs" x-on:change="$dispatch='selectchange',{value:opt.value}" :key="opt.value">
            <option x-text="opt.value"></option>
          </template>
        </select>
      </form>
    </div>
    <div>
      <template x-for="txt in tabs">
        <p x-text="txt.text" x-show="open === txt.value"></p>
      </template>
    </div>
  </div>
</div>

Thanks in advance

Answer 1

$dispatch is a function you need to call. You also want to use a ref so you can focus your button easily.

<div x-data="data()" x-init="select = open, $watch('select', value => console.log(value))" $watch="('select', value => console.log(select))" class="w-full h-screen bg-gray-200 flex items-center justify-center">
  <div class="flex flex-wrap gap-2">
    <template x-for="btn in tabs" :key="btn.value">
      <button x-ref="button" x-on:selectchange.window="$refs.button.focus()" x-text="btn.value" @click="open = btn.value, select = btn.value" class="bg-blue-400 px-6 py-4 rounded-sm border-b-4 border-blue-800 uppercase tracking-widest font-bold " :class="{'bg-blue-800 text-blue-300' : btn.value === open}">toggle</button>
    </template>
    <div class="w-full">
      <form action="">
        <select class="w-full appearance-none px-6 py-4 border border-blue-800 rounded-sm" name="" id="" x-model="select">
          <template x-for="opt in tabs" x-on:change="$dispatch('selectchange', {value:opt.value})" :key="opt.value">
            <option x-text="opt.value"></option>
          </template>
        </select>
      </form>
    </div>
    <div>
      <template x-for="txt in tabs">
        <p x-text="txt.text" x-show="open === txt.value"></p>
      </template>
    </div>
  </div>
</div>