$dispatch select change event to update button focus - alpine.js

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/alpine#v2.x.x/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>