Pagination UI update issue

[Uhasith]

Have you searched through other issues to see if your problem is already reported or has been fixed?

Yes, I did not find it.

Did you read the documentation?

Yes, I did not find it.

Have you tried to publish the views?

Yes - I didn't work.

Is there an error in the console?

No

PHP Version

8.2

PowerGrid

5.10.3

Laravel

11.20.0

Livewire

3.5.6

Alpine JS

3.0.1

Theme

Tailwind 3.x

Describe the bug.

When i try to navigate to the Last page Content is updated correctly inside the Table but the Pagination UI component not updating correctly. Here i attached a small video Clip.

https://github.com/user-attachments/assets/c9214c83-78cb-49e0-8586-138e907e6ef2

To Reproduce...

First click on "FOO" then....

Extra information

<?php
 //...

[luanfreitasdev]

It's working normally here. Did you run npm run build and optimize:clear?

https://github.com/user-attachments/assets/c0cb20aa-720e-484b-8875-706a83a60857

[Uhasith]

It's working normally here. Did you run npm run build and optimize:clear?

Screen.Recording.2024-08-20.at.09.43.14.mov

Yeah, mate !!. I ran a composer update and cleared the cache as well. I have 30K+ records btw. But my livewire config is like this 'inject_morph_markers' => true. Do i need to change this to false? @luanfreitasdev

[Uhasith]

<?php

namespace App\Livewire;

use App\Models\Product;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Blade;
use Illuminate\View\View;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\Responsive;
use PowerComponents\LivewirePowerGrid\Traits\WithExport;
use WireUi\Traits\WireUiActions;

final class ProductTable extends PowerGridComponent
{
    use WireUiActions;
    use WithExport;

    public string $tableName = 'ProductTable';

    public function setUp(): array
    {
        // $this->showCheckBox();

        return [
            Responsive::make(),
            Header::make()
                ->showToggleColumns()
                ->showSearchInput(),
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    public function datasource(): Builder
    {
        return Product::query();
    }

    public function relationSearch(): array
    {
        return [];
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('id')
            ->add('supplier_name')
            ->add('brand_name')
            ->add('name')
            ->add('sku')
            ->add('ean_code')
            ->add('bol_ean_code')
            ->add('formatted_packing_type', fn ($product) => $product->packing_type ? Blade::render('<div class="w-full flex items-center justify-center"><x-wui-badge info class="mx-auto text-center" label="'.$product->packing_type.'"/></div>') : '')
            ->add('unit_price')
            ->add('tax_price')
            ->add('formatted_stock', fn ($product) => Blade::render('<div class="w-full flex items-center justify-center"><x-wui-badge positive class="mx-auto text-center" label="'.$product->stock.'"/></div>'));
    }

    public function columns(): array
    {
        return [
            Column::make('Id', 'id'),
            Column::add()
                ->title('Product Name')
                ->field('name')->searchable(),
            Column::add()
                ->title('EAN Code')
                ->field('ean_code')->searchable(),
            Column::add()
                ->title('BOL EAN Code')
                ->field('bol_ean_code')->searchable(),
            Column::add()
                ->title('SKU')
                ->field('sku')->searchable(),
            Column::add()
                ->title('Supplier Name')
                ->field('supplier_name')->searchable(),
            Column::add()
                ->title('Stock Available')
                ->field('formatted_stock'),
            Column::add()
                ->title('Unit Price')
                ->field('unit_price'),
            Column::action('Action'),
        ];
    }

    public function filters(): array
    {
        return [];
    }

    public function edit($rowId): void
    {
        $this->dispatch('open-product-modal', params: ['id' => $rowId, 'modalId' => 'product-create-modal']);
    }

    public function delete($rowId): void
    {
        $this->dialog()->confirm([
            'title' => 'Are you Sure ?',
            'description' => 'You want to delete this Product ?',
            'icon' => 'error',
            'accept' => [
                'label' => 'Yes, delete it',
                'method' => 'deleteProduct',
                'params' => ''.$rowId.'',
            ],
        ]);
    }

    public function deleteProduct($id)
    {
        $product = Product::find($id);
        $product->delete();
    }

    public function actionsFromView($row): View
    {
        return view('actions.table-actions', ['row' => $row]);
    }

    /*
    public function actionRules($row): array
    {
       return [
            // Hide button edit for ID 1
            Rule::button('edit')
                ->when(fn($row) => $row->id === 1)
                ->hide(),
        ];
    }
    */
}

[luanfreitasdev]

Does it work correctly without inject_morph_markers?

[Uhasith]

Does it work correctly without inject_morph_markers?

I tried both but the issue remains the same. I hope this bug is not related to any config settings right ? Nothing fancy i just followed the Docs and did all the steps correctly. Other issues are fixed with your latest releases. But this one is still bothering me.

[lsmedia]

@Uhasith Do you have customized views e.g. in /resources/views/vendor/livewire-powergrid?

[Uhasith]

@Uhasith Do you have customized views e.g. in /resources/views/vendor/livewire-powergrid?

No nothing inside the vendor folder

[luanfreitasdev]

With a new clean test, I haven't found a problem related to this.

[Uhasith]

With a new clean test, I haven't found a problem related to this.

Please don't close this issue. Let's see if someone has the same issue as this

[Uhasith]

With a new clean test, I haven't found a problem related to this.

BTW i'm getting this console error when clicking pagination's Last page button. @luanfreitasdev @lsmedia

[Uhasith]

When i remove Responsive::make() from setUp it's working without any errors.

[lsmedia]

I cannot reproduce the error you have shown. But I also had a UI error in the past few days with a table with about 3000 records, using the select menu for the hits per page.

I can reproduce it via:

1. create table with select menu in footer, I show 15 records per page by default.

My setUp() method looks something like this:

public function setUp(): array
    {
        $page = $this->pageName.'_'.$this->getPage($this->pageName);
        $cache_tag = 'pg_cache_'.$this->modelClassSlug.'_'.$page;

        $this->persist(
            tableItems: ['columns', 'filters', 'sort'],
            prefix: Auth::user()->id ?? ('ext-'.rand())
        );

        Cache::make()
            ->ttl(60*60)
            ->customTag($cache_tag);

        return [
            Header::make()
                ->showToggleColumns()
                ->showSearchInput(),

            Footer::make()
                ->showPerPage(perPage: $this->showPerPage, perPageValues: $this->perPageValues)
                ->showRecordCount()
                ->pageName($this->pageName),

            Responsive::make(),
        ];
    }

2. load table with at least a few hundred entries.
3. use the select menu and choose for example 100 hits per page.
4. now jump to the last page in the table navigation.
5. you will see that the table content is updated, but the table navigation is not changed. Apart from the fact that the display "Show records X to Y of Z" has not been changed, you still had the option of navigating to the "next page" in the table navigation (although we are already on the last page). This again led to the well-known "dead end".

Also, I had the same error message in the console as in your case and in all other cases related to morph markers (the output message also depends on the browser):

Uncaught TypeError: this.endComment is undefined
    appendChild http://[...]/build/assets/app-de4e0e77.js:56
    bt http://[...]/build/assets/app-de4e0e77.js:56
    [...]

[luanfreitasdev]

A few questions:

Does this happen in the latest version?

Could you test without persist, caching, and responsive?

Thank you

[lsmedia]

Yep, I'm on the current version 5.10.4.

It's definitely related to the responsive feature, as the other issues related to morph markers were too.

As soon as I remove Responsive::make() from setUp(), everything works fine.

[Uhasith]

I have 30K + records on my table. I installed a fresh Laravel app and used Responsive::make() with 500 records and working fine without any UI glitches. As @lsmedia said all errors disappear when I remove Responsive::make() from the setUp().

[luanfreitasdev]

This change fixed this problem but was done in version 6.x. It seems impossible to make the same change in version 5.x.

https://github.com/user-attachments/assets/ca88e6d9-fad8-4779-bbfd-3bd5fd12dadb

Fixes: https://github.com/Power-Components/livewire-powergrid/commit/f175d49694cc3593a3a2851f66d6fd4a9fe51500