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

MomoDerDodo's avatar

Livewire 3 Upgrade breaks Pagination in a weird way

Hello Everyone, i tried upgrading my Livewire version from 2 to 3 but when i do, the pagination breaks in a weird way and is not properly functioning anymore.

When clicking the controls of the paginator, for example "next" only the first item gets changed and the others stay as before. If i change the URL Parameter by hand, everything works fine.

I tried upgrading the project completely by hand following the official upgrade guide and i also tried using the upgrade command Livewire provides. Both did not work out and the paginators were still broken.

I am super confused and i already asked a question on stackoverflow, but no one seems to have an answer for me.

For now i cant upgrade because of that, but i would really like to use the new features of version 3.

Thanks in advance.

My Livewire component:

<?php

namespace App\Http\Livewire\Admin;

use App\Models\RevisaInvoice;
use Livewire\Component;
use Livewire\WithPagination;

class RevisaInvoicesList extends Component
{
    use WithPagination;

    public string $filenameSearch = '';
    public string $companySearch = '';
    public string $dateSearch = '';
    public bool $showProcessed = false;

    public function render()
    {
        return view('livewire.admin.revisa-invoices-list', [
            'revisaInvoices' => RevisaInvoice::final()
                ->where('filename', 'LIKE', '%'.$this->filenameSearch.'%')
                ->whereHas('client', function ($q) {
                    $q->where('name', 'LIKE', '%'.$this->companySearch.'%');
                })
                ->where('created_at', 'LIKE', '%'.$this->dateSearch.'%')
                ->where('is_processed', $this->showProcessed)
                ->orderBy('is_processed')
                ->orderByDesc('created_at')
                ->paginate(8, pageName: 'revisa-invoices')
        ]);
    }

    public function updated(): void
    {
        $this->resetPage();
    }

    public function toggleProcessed(RevisaInvoice $revisaInvoice): void
    {
        $revisaInvoice->toggleProcessed();
    }
}

<div wire:poll.60s>
    <div class="grid sm:grid-cols-3 gap-1 sm:gap-3">
        <x-forms.input wire:model.live="filenameSearch" type="text" placeholder="{{ __('Filter Filename') }}" />
        <x-forms.input wire:model.live="companySearch" type="text" placeholder="{{ __('Filter Company') }}" />
        <x-forms.input wire:model.live="dateSearch" type="text" placeholder="{{ __('Filter Created at') }}" />
    </div>

    <div class="mt-2">
        <label>
            <input wire:model.live="showProcessed" type="checkbox" class="rounded border-gray-400 placeholder-gray-200 mr-1 -mt-[2px]">
            <span>{{ __('Show processed invoices') }}</span>
        </label>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @forelse($revisaInvoices as $revisaInvoice)
            <div class="relative mt-5" wire:key="revisaInvoice--{{ $revisaInvoice->id }}">
                <div onclick="return confirm('Are you sure?') || event.stopImmediatePropagation()"
                     wire:click="toggleProcessed({{ $revisaInvoice }})"
                     class="absolute cursor-pointer -bottom-[12px] -right-[12px] px-[5px] py-[3px] bg-white rounded-full border group shadow z-10 {{ $revisaInvoice->is_processed ? 'hover:border-danger-700' : 'hover:border-success-700' }}"
                     tabindex="0"
                     title="{{ $revisaInvoice->is_processed ? __('Mark as unprocessed') : __('Mark as processed') }}">
                    @if($revisaInvoice->is_processed)
                        <i class="fa-solid fa-times fa-fw group-hover:text-danger-700"></i>
                    @else
                        <i class="fa-solid fa-check fa-fw group-hover:text-success-700"></i>
                    @endif
                </div>

                <div class="border rounded shadow relative {{ $revisaInvoice->is_processed ? 'border-success-400' : '' }}">
                    <a class="flex items-center text-primary-800 hover:text-secondary-400 p-3 rounded-t border-b {{ $revisaInvoice->is_processed ? 'bg-success-100' : '' }}"
                       href="{{ route('admin.invoices.download', ['revisa', $revisaInvoice->id]) }}"
                       title="{{ __('Download') . ': ' . $revisaInvoice->filename }}">
                        <i class="fa-solid fa-file-pdf text-2xl"></i>
                        <span class="ml-2 overflow-ellipsis overflow-hidden whitespace-nowrap">{{ $revisaInvoice->filename }}</span>
                    </a>

                    <div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2">
                        <small class="text-gray-300 block">{{ __('From') }}</small>
                        <span>{{ $revisaInvoice->client->name }}</span>
                    </div>

                    <div class="{{ $revisaInvoice->is_processed ? 'bg-success-100' : 'bg-gray-50' }} px-3 py-2 rounded-b">
                        <small class="text-gray-300 block">{{ __('Created at') }}</small>
                        <span>{{ date('d-m-Y', strtotime($revisaInvoice->created_at)) }}</span>
                    </div>
                </div>
            </div>
        @empty
            <div class="mt-3 col-span-4">
                <x-alert type="warning">{{ __('No invoices') }}</x-alert>
            </div>
        @endforelse
    </div>

    <div class="mt-5">
        {{ $revisaInvoices->links() }}
    </div>
</div>

0 likes
2 replies
MomoDerDodo's avatar
MomoDerDodo
OP
Best Answer
Level 1

With the help of the Laravel Daily team the solution is found.

It's the Livewire version. Somehow when upgrading it turned out to be livewire/livewire": "3.0" flat instead it should be livewire/livewire": "^3.0" to include the latest fixes. After executing composer update all worked out as it should.

1 like

Please or to participate in this conversation.