Clicking the button should show a spinner, and also submit the form, In Alpine V2 this was working correctly, but in Alpine.js V3 the spinner is showing correctly but the form is not submitted anymore. I tried returning true/false inside the x-on-click but that does not make a difference.
In other words: How can I achieve x-on:click to also submit the form in Alpine.js V3?
order.blade.php:
<form method="POST" action="{{ route('wishlists.presents.order', $wishlist->id) }}">
{{ method_field('PATCH') }}
@csrf
<div class="sm:flex sm:items-center">
<x-jet-label class="sm:flex-grow" for="" value="{!! __('Drag & drop them in the order you like. Then tap Save') !!}" />
<x-actionbar class="2c570:py-0">
<x-action-secondary href="{{ route('wishlists.presents.index', ['wishlist' => $wishlist['id']]) }}" />
<x-action-primary-alpine type="submit" />
</x-actionbar>
</div>
action-primary-alpine.blade.php
@props([
'tekst' => __('Save'),
'loadingTekst' => __('Saving'),
'width' => '32',
'type' => '',
'color' => 'purple',
])
<div x-data="{busy: false}">
<button :disabled=busy x-on:click="busy = true" {{ $attributes->merge(['class' => "flex items-center justify-center bg-{$color}-500 w-{$width} h-12 border border-transparent rounded-full text-{$color}-100 tracking-widest hover:text-white active:bg-{$color}-600 focus:outline-none focus:ring-4 focus:ring-{$color}-200 transition ease-in-out duration-150"]) }}>
<div class="flex" x-show="busy">
<x-loading />
<div class="w-2"></div>
<div class="tracking-tighter">{{ $loadingTekst }}</div>
</div>
<div class="flex" x-show="!busy">
<x-svg.checkmark />
<div class="w-2"></div>
{{ $tekst }}
</div>
</button>
</div>
The button dynamically being disabled prevented the form from being submitted. To solve this I also moved x-data outside the component (which seems ugly to me, there must be a way to do this more clean). The component can also be used if no form is used.
<form method="POST" action="{{ route('wishlists.presents.order', $wishlist->id)}}"
x-data="{busy: false, isSubmitted: false}" x-on:submit="isSubmitted = true">
@props([
...
'submitsForm' => 'false',
])
<div>
<button :disabled={{ $submitsForm == 'true' ? 'isSubmitted' : 'busy'}} x-on:click="busy = true"