Selectable doesn't work after bulk deleting resources

[wswawan]

I tried selectable props to mass delete data, for the first try it worked but after the data was deleted and tried toggle select all it couldn't select the data again

<?php

use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Pagination\LengthAwarePaginator;
use Livewire\Volt\Component;
use Mary\Traits\Toast;
use Livewire\WithPagination;

new class extends Component {
    use Toast, WithPagination;

    public string $search = '';
    public array $sortBy = ['column' => 'updated_at', 'direction' => 'desc'];
    public array $selected = [];

    public function users(): LengthAwarePaginator
    {
        return User::query()
            ->when($this->search, fn(Builder $q) => $q->where('name', 'like', "%$this->search%")
                ->orWhere('email', 'like', "%$this->search%")
                ->orWhere('phone', 'like', "%$this->search%")
            )->orderBy(...array_values($this->sortBy))
            ->paginate();
    }

    public function headers(): array
    {
        return [
            ['key' => 'avatar', 'label' => '', 'class' => 'w-1'],
            ['key' => 'name', 'label' => 'Name', 'class' => 'text-black'],
            ['key' => 'email', 'label' => 'Email', 'class' => 'text-black'],
            ['key' => 'phone', 'label' => 'Phone', 'class' => 'text-black'],
        ];
    }

    public function delete(string $id): void
    {
        $user = User::find($id);
        $user->delete();
        $this->warning("$user->name has been deleted.", position: 'toast-bottom');
    }

    public function bulkDelete(): void
    {
        User::whereIn('id', $this->selected)->delete();
    }

    public function with(): array
    {
        return [
            'users' => $this->users(),
            'headers' => $this->headers()
        ];
    }

    public function clear(): void
    {
        $this->reset();
        $this->resetPage();
        $this->success('Filters cleared', position: 'toast-bottom');
    }

    public function updated($property): void
    {
        if (!is_array($property) && $property != "") {
            $this->resetPage();
        }
    }
}; ?>

<div>
    <x-header title="Users" size="text-2xl" separator progress-indicator>
        <x-slot:middle class="!justify-end">
            <x-input placeholder="Search..." wire:model.live.debounce="search" clearable icon="o-magnifying-glass"
                     class="file-input-sm"/>
        </x-slot:middle>
        <x-slot:actions>
            <x-button icon="o-funnels" @click="$wire.drawer = true" responsive icon="o-funnel" class="btn-sm"/>
            <x-button icon="o-plus" link="/posts/create" class="btn-primary btn-sm" label="Create"/>
            <x-button icon="o-trash" class="btn-error btn-sm" label="Delete" wire:click="bulkDelete"/>
        </x-slot:actions>
    </x-header>
    <x-card>
        <x-table :headers="$headers" :rows="$users" with-pagination :sort-by="$sortBy" link="posts/{id}/edit"
                 wire:model="selected" selectable>
            @scope('cell_avatar', $user)
            <x-avatar image="{{ $user->avatar ?? '/empty-user.jpg' }}" class="!w-10"/>
            @endscope

            {{-- Special `actions` slot --}}
            @scope('actions', $user)
            <x-button icon="o-trash" wire:confirm="Are you sure ?" wire:click="delete('{{ $user->id }}')" spinner
                      class="btn-sm"/>
            @endscope
        </x-table>
    </x-card>
</div>

[robsontenorio]

Once you bulk delete , of course , it will mess up pagination. Try to call “reset” and “resetPage” after bulk delete.

[wswawan]

I tried $this->reset() and $this->resetPage() too, but still no luck. first bulk delete of select all works, but second click select all, all rows are not selected.

[robsontenorio]

What is your final code after including theese methods?

[wswawan]

is called inside the bulkDelete function, the rest is the same as I mentioned above

public function bulkDelete(): void
    {
        User::whereIn('id', $this->selected)->delete();
        $this->reset();
        $this->resetPage();
    }

[robsontenorio]

Are you trying individual row selection or using "select all" checkbox ?

[wswawan]

Select all checkbox

[robsontenorio]

Same as #430

[robsontenorio]

@wswawan

Could you please test this branch? Let me know if it is fixed.
There is no need to reset pagination after delete.

compsoer require robsontenorio/mary:fix-table-select-all
php artisan view:clear

[wswawan]

composer require robsontenorio/mary:fix-table-select-all
php artisan view:clear

with this command i got an error
Could not parse version constraint fix-table-select-all: Invalid version string "fix-table-select-all"

but I have changed component Table.php with changes in this branch, it works

Screen.Recording.2024-05-25.at.4.08.34.PM.mov

Thank you for taking the time for that 👍 👏

[robsontenorio]

Will release it soon.