Finally I found the solution that is : removing all Alpine Js import from resources/js/app.js when you use Breeze Blade with Alpine Starter kit . When you are installed Livewire 3 it comes bundled with Alpine Js so you don't need to install or call Alpine Js somewhere. The issue was I use Breeze Blade starter kit that use Alpine import in resources/js/app.js. See Livewire docs
Dec 26, 2023
3
Level 3
Alpine Js component disable wire:click button in my step form
I have a livewire step form where all the steps work. In the second step of my form I introduced an alpine js component which allows you to add tags. But the problem is that when this component is added, clicking on the Previous and Next buttons is blocked after a round trip
CODE OF MY ALPINE COMPONENT (this is from Caleb tag input sample)
<div x-data="{tags: [], newTag: '', inputName: 'foo' }">
<template x-for="tag in tags">
<input type="hidden" x-bind:name="inputName + '[]'" x-bind:value="tag" />
</template>
<div>
{{-- class="max-w-sm w-full mx-auto" --}}
<div class="tags-input">
<template x-for="tag in tags" :key="tag">
<span class="tags-input-tag">
<span x-text="tag"></span>
<button type="button" class="tags-input-remove" @click="tags = tags.filter(i => i !== tag)">
×
</button>
</span>
</template>
<input class="tags-input-text focus:outline-none focus:border-sky-200 focus:ring-1 focus:ring-sky-200" placeholder="Add a term"
@keydown.enter.prevent="if (newTag.trim() !== '') tags.push(newTag.trim()); newTag = ''"
x-model="newTag" />
</div>
</div>
</div>
AND HERE IS MY STEP BUTTON
@if ($currentStep > 1)
<button wire:click="decrementSteps" class="text-indigo-200 font-bold border border-indigo-200 rounded-md px-3 py-2">
PREVIOUS
</button>
@endif
@if ($currentStep < $totalStep) <button wire:click="incrementSteps"
class="flex-1 px-3 py-2 max-w-fit rounded-md text-white font-bold bg-[#2892AB] hover:bg-[#1e8299] focus:bg-[#1e8299] border border-transparent tracking-widest focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
NEXT
</button>
@endif
If I remove the alpine component all works fine that's to say click on PREVIOUS and NEXT button many time is possible but if I use the alpine component again the problem come again
Level 3
1 like
Please or to participate in this conversation.