Flux button shows loading state on all buttons when used inside @foreach loop

[Rodion15]

Title:

Flux button shows loading state on all buttons when used inside @foreach loop

Description:

When using <flux:button> with wire:click inside a @foreach loop, clicking on one button triggers the loading state on all buttons instead of only the clicked button.

However, when buttons are defined individually (not in a loop), the loading state works correctly and only appears on the clicked button.

Steps To Reproduce:

1. Create a Livewire component with flux buttons inside a @foreach loop
2. Add wire:click action to each button
3. Click on any button

Code example that shows the bug:

@foreach($this->districts as $zone)
    <flux:button wire:click="selectZone({{ $zone->id }})" size="xs">Open</flux:button>
@endforeach

Expected behavior: Only the clicked button should show loading state

Actual behavior: All buttons in the loop show loading state

Working example (without foreach):

<flux:button wire:click="selectZone(1)" size="xs">Open</flux:button>
<flux:button wire:click="selectZone(2)" size="xs">Open</flux:button>
<flux:button wire:click="selectZone(3)" size="xs">Open</flux:button>

In this case, only the clicked button shows loading state (correct behavior).

Environment:

• Laravel version: 12.53.0
• Livewire version: 4.2.1
• Flux version: 2.12.1

Screenshot:

[jeffchown]

@Rodion15 I created the following snippet to test your issue and cannot reproduce it. The following works for me as expected:

<?php

use Livewire\Component;

new class extends Component
{
    public function selectZone(int $id): void
    {
        sleep(2);
    }
};
?>


<div>
    @for ($i = 1; $i < 4; $i++)
        <flux:button wire:click="selectZone({{ $i }})" size="xs">Open</flux:button>
    @endfor
</div>

[jeffchown]

There was a very old issue that matches what you report but this PR fixed that back in Dec 2024: #849

Have your published any Flux components?
Are you using Blaze?
Have your run php artisan view:clear and npm run build?

[Rodion15]

@jeffchown

1. Using Blaze? Yes
2. Ran php artisan view:clear and npm run build? Yes, I did both, but the issue remained unchanged.

However, I found a solution! 🎉

Adding wire:target to each button fixed the problem completely:

@foreach($this->districts as $zone)
    <flux:button 
        wire:click="selectZone({{ $zone->id }})" 
        wire:target="selectZone({{ $zone->id }})"
        size="xs"
    >
        Open
    </flux:button>
@endforeach

Before: All buttons showed loading state when clicking any single button ❌
After: Only the clicked button shows loading state ✅

[jeffchown]

@Rodion15 The workaround you used is actually the one that that PR implements. The wire:target is supposed to be created automatically (and is when I try the snippet I posted w/o Blaze).

I retried my snippet with Blaze activated and was able to reproduce your issue, therefore, it looks like Blaze is negating the PR due to the dynamic nature of the @for(each) loops.

cc @joshhanley

[ghabriel25]

I can confirm that even without loop, if there are more than one button on the page that using same method with different parameters, it will trigger loading for all.

Manually using wire:target indeed fix the problem

[LukasCCB]

Use wire:key (https://livewire.laravel.com/docs/4.x/troubleshooting#adding-wirekey)

[BartekJan1128]

Have this problem aswell.wire:key does not help, must be wire:target.