Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Seydina's avatar

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)">
                  &times;
                </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

0 likes
3 replies
Seydina's avatar
Seydina
OP
Best Answer
Level 3

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

1 like
ZermattChris's avatar

@Seydina I just spent half my day coming to the exact same realization. Was getting weird behavior and a "Double loading of Alpine & LIvewire" in the browser's console.

1 like

Please or to participate in this conversation.