Livewire click not working after change pagination page

Question

Strange issue with pagination. If I change page - wire:click() stops working. If reload page (.../suppliers?page=2) - its works. Please help.

Component:

namespace App\Http\Livewire;

use App\Models\Supplier;
use Livewire\WithPagination;

class Suppliers extends Component
{   
    use WithPagination;
    protected $paginationTheme = 'bootstrap';

    public $search = '';
    public bool $showModal = false;

    public function showAutoModal()
    {   
        dd(555);
    }

    public function render()
    {
        return view('livewire.suppliers', [
            'suppliers' => Supplier::withCount('products')->where('name', 'like', '%'.$this->search.'%')->latest()->paginate(8),
        ]);
    }  

View(blade):

@foreach ($suppliers as $supplier)
    <a href="#" wire:click="showAutoModal()" class="hover-scale me-2">Auto</a> 
@endforeach
<div class="d-flex">
    <div class="ms-auto mt-2">
        {!! $suppliers->links() !!}
    </div>
</div>

Answer 1

You have multiple root-elements in your view, simply wrap it all in a div, so that it'll become one root element. You should also add wire:key to any elements in a loop.

<div>
    @foreach ($suppliers as $supplier)
        <a href="#" wire:click="showAutoModal()" wire:key="supplier-{{ $supplier->id }}" class="hover-scale me-2">Auto</a> 
    @endforeach

    <div class="d-flex">
        <div class="ms-auto mt-2">
            {!! $suppliers->links() !!}
        </div>
    </div>
</div>