Selecting a filter from select filter empties all filter select inputs

[cdterry87]

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?

No, this error is not related to views.

Is there an error in the console?

No

PHP Version

8.3

PowerGrid

5.3

Laravel

10.10

Livewire

3.4

Alpine JS

No response

Theme

Tailwind 3.x

Describe the bug.

I created a basic table in a brand new Laravel 10 project. The only dependencies added were Tailwind, Livewire, and Powergrid. The table only has a few columns, but two of the columns have Filter::select filters. The entire table component is shown below.

Everything renders correctly, but when I select a filter option from the select dropdown, although it filters the table correctly, it also wipes out the options from all of the filter select inputs. Therefore, you can no longer filter any of the columns unless you refresh the page. I have also attached screenshots of this happening.

namespace App\Livewire;

use App\Models\Product;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Exportable;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;

final class ProductsTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            Exportable::make('export')
                ->striped()
                ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
            Header::make()->showSearchInput(),
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

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

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
            ->add('name')
            ->add('price')
            ->add('stock')
            ->add('on_sale')
            ->add('category');
    }

    public function columns(): array
    {
        return [
            Column::make('Name', 'name')
                ->searchable()
                ->sortable(),
            Column::make('Price', 'price')
                ->sortable(),
            Column::make('Stock', 'stock')
                ->sortable(),
            Column::make('On Sale', 'on_sale')
                ->sortable(),
            Column::make('Category', 'category')
                ->searchable()
                ->sortable(),

        ];
    }

    public function filters(): array
    {
        return [
            Filter::select('on_sale', 'on_sale')
                ->dataSource(
                    Product::select('on_sale')
                        ->distinct()
                        ->orderBy('on_sale')
                        ->get()
                )
                ->optionValue('on_sale')
                ->optionLabel('on_sale'),
            Filter::select('category', 'category')
                ->dataSource(
                    Product::select('category')
                        ->distinct()
                        ->orderBy('category')
                        ->get()
                )
                ->optionValue('category')
                ->optionLabel('category'),
        ];
    }
}

Clicked on the filter select menu and you can see the options are available.

The table reloads, the "Category" column filters correctly, and now the filter select menu is empty.

The filter select menu is also now empty for the "On Sale" column, as well. Previously it had "Y" and "N" options.

To Reproduce...

Create a powergrid table, add some Filters::select filters to the filters() method, then reload your page. You should see your table with the filter select input above the columns. Select an option from the filter select input. The table should filter the table correctly, but all filter select inputs will then be empty. Even clicking the "clear" button to clear the filter doesn't bring back the filter input values.

Extra information

<?php
 //...

[cdterry87]

I have created a base repository demonstrating this issue, if this helps. It can be found at the link below and has setup instructions if anyone wants to use it for reference.

https://github.com/cdterry87/powergrid-test

Aside from Laravel 10, the only other dependencies I manually added were Tailwind, Livewire 3, and Livewire Powergrid 5.4 (at the time of this writing). I followed the "Getting Started" instructions for each dependency, created my database table, populated it with sample data, then created my Powergrid Table. Then, I setup the powergrid table according to the documentation and added filters, but all of the filters disappear after one is selected.

I also noticed that in the config/livewire-powergrid.php, if I change 'filter' => 'inline' to 'filter' => 'outside' so the filters render outside the table, if I click on the icon to view the filter, my filters show, but they are all empty from the start. Below is a screenshot of this happening. All of the dropdowns should have something in them, but they are all empty when clicking the Filters icon.

If I am doing something incorrectly, please let me know.

[luanfreitasdev]

Hi!, Thanks for reposting the bug. It helped a lot with the repository on GitHub.

I fixed the problem and added a new method 'computedDatasource' that can receive a string with the name of a computed property so, we can reuse the queries.

   #[\Livewire\Attributes\Computed(cache: true)]
    public function getDepartments()
    {
        return Employee::query()
            ->select('department')
            ->distinct()
            ->get();
    }

    #[\Livewire\Attributes\Computed(cache: true)]
    public function getGenrer()
    {
        return Employee::query()
            ->select('gender')
            ->distinct()
            ->get();
    }

    #[\Livewire\Attributes\Computed(cache: true)]
    public function getActive()
    {
        return Employee::query()
            ->select('active')
            ->distinct()
            ->get();
    }

    public function filters(): array
    {
        return [
            Filter::select('department', 'department')
                ->computedDataSource('getDepartments')
                ->optionValue('department')
                ->optionLabel('department'),
            Filter::select('gender', 'gender')
                ->computedDataSource('getGenrer')
                ->optionValue('gender')
                ->optionLabel('gender'),
            Filter::select('active', 'active')
                ->computedDataSource('getActive')
                ->optionValue('active')
                ->optionLabel('active'),
        ];
    }