Selectable

[cooffeeRequired]

maryUI version

1.34.1

daisyUI version

4.12.10

Livewire version

3.5.1

What browsers are affected?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

✅ For sure you can paste screenshots.

❌ Please, don't paste code as screenshot. Paste as formatted markdown code.

ERROR

VM12988:19 Uncaught TypeError: this.selection is not iterable
    at Proxy.isPageFullSelected (eval at safeAsyncFunction (livewire.js?id=87e1046f:1176:21), <anonymous>:19:41)
    at eval (eval at safeAsyncFunction (livewire.js?id=87e1046f:1176:21), <anonymous>:44:38)
    at livewire.js?id=87e1046f:1521:9
    at releaseNextTicks (livewire.js?id=87e1046f:1529:24)
    at livewire.js?id=87e1046f:1516:9

PHP

<?php

namespace App\Livewire;

use App\Http\Controllers\AuthController;
use App\Models\User;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Illuminate\Foundation\Application;
use Illuminate\Http\Request;
use Illuminate\Support\Collection;
use Illuminate\Support\Str;
use Livewire\Component;
use Mary\Traits\Toast;

class Users extends Component
{
    use Toast;

    public bool $modal_register = false;
    public bool $modal_register_post = false;
    public string $search = '';
    public bool $drawer = false;

    public array $sortBy = ['column' => 'name', 'direction' => 'asc'];

    public string $username = '';
    public string $password = '';
    public string $email = '';
    public string $permissions = '';
    public bool $randomPassword = false;
    public array $user = ['username' => '', 'password' => '', 'email' => '', 'permissions' => 0];

    public function save(bool $random = false): void
    {

        $request = Request::create('/auth/register', 'POST', $this->user = ($random ? User::random() : [
            'email' => $this->email,
            'password' => $this->password,
            'username' => $this->username,
            'permissions' => $this->permissions
        ]));

        $request->setLaravelSession(app('session')->driver());
        $authController = new AuthController();
        $response = $authController->register($request);

        $content = json_decode($response->content());

        if( $response -> status() === 201) {
            $this->success($content->message, position: 'top-end');
        } else {
            $this->error($content->message, position: 'top-end');
        }

        $this->modal_register_post = true;
    }

    public function clear(): void
    {
        $this->reset();
        $this->success('Filters cleared.', position: 'top-end');
    }

    public function delete($id): void
    {
        try {
            $user = User::where('id', $id);

            if(isset($user)) {
                $toid = $user->get()->value('toid');
                $this->success('Uživatel ' . $toid, 'byl odstraněn', position: 'top-end');
            } else {
                $this->error('Uživatel ' . $id, 'nebyl nalezen', position: 'top-end');
            }
            $user->delete();
        } catch (\Exception $e) {
            $this->error($e->getMessage(), position: 'top-end');
        }
    }

    public function headers(): array
    {
        return [
            ['key' => 'id', 'label' => '#', 'class' => 'w-1'],
            ['key' => 'toid', 'label' => 'Id uživatele', 'class' => 'w-1'],
            ['key' => 'name', 'label' => 'Jméno', 'class' => 'w-64'],
            ['key' => 'email', 'label' => 'E-mail'],
        ];
    }

    public function users(): Collection
    {
        $query = User::query();

        foreach ($this->sortBy as $column) {
            $query->orderBy($column);
        }

        $users = $query->get();

        if ($this->search) {
            $users = $users->filter(function (User $item) {
                return Str::contains(strtolower($item->name), strtolower($this->search)) ||
                    Str::contains(strtolower($item->email), strtolower($this->search)) ||
                    Str::contains(strtolower($item->toid), strtolower($this->search));
            });
        }

        return $users;
    }

    public function render(): Factory|Application|View|\Illuminate\View\View|\Illuminate\Contracts\Foundation\Application
    {
        return view('livewire.users', [
            'users' => $this->users(),
            'headers' => $this->headers()
        ]);
    }
}

HTML/Blade

    <!-- TABLE  -->
    <x-card>
        <x-table :headers="$headers" :rows="$users" :sort-by="$sortBy" selectable>
            @scope('actions', $user)
            <x-button icon="o-trash" wire:click="delete({{ $user['id'] }})" wire:confirm="Are you sure?" spinner class="btn-ghost btn-sm text-red-500" />
            @endscope
        </x-table>
    </x-card>

When i wanna select something, its goes selected all with that error.

[robsontenorio]

Please , reduce your example and keep the minimal code to reproduce it.

[cooffeeRequired]

i did it

[robsontenorio]

You have missed the wire:model to bind the selection.

https://mary-ui.com/docs/components/table#row-selection

[cooffeeRequired]

i got the same issue.. on the localhost everything works, but when i deploy that on the vercel i got same bug as before.

    @dump($selected)

    <!-- TABLE  -->
    <x-card>
        <x-table :headers="$headers" :rows="$users" :sort-by="$sortBy"
                 selectable
                 wire:model.live="selected"
        >
            @scope('cell_name', $user)
                <div class="flex">
                    <img class="rounded-full max-w-[22px] mr-2" src="{{$user->avatar}}" alt="">
                    <h1>{{$user->name}}</h1>
                </div>
            @endscope
            @scope('cell_permission', $user)
                @switch($user->permission)
                    @case(0)
                        <x-badge value="Administrator" class="badge-primary" />
                        @break
                    @case(1)
                        <x-badge value="Developer" class="badge bg-green-300" />
                        @break
                    @case(2)
                        <x-badge value="Vařič" class="badge-warning" />
                        @break
                    @default
                        <x-badge value="Host" class="badge bg-gray-200" />
                        @break
                @endswitch
            @endscope
            @scope('actions', $user)
                @if(Auth::user() != $user)
                <div class="flex gap-2">
                    <x-button icon="o-pencil" wire:click="edit({{ $user['id'] }})" spinner class="btn-ghost btn-sm text-green-700" />
                    <x-button icon="o-trash" wire:click="delete({{ $user['id'] }})" spinner class="btn-ghost btn-sm text-red-500" />
                </div>
                @else
                    <div class="flex gap-2">
                        <x-button icon="o-pencil" wire:click="edit({{ $user['id'] }})" spinner class="btn-ghost btn-sm text-green-700" />
                        <x-button disabled icon="o-trash"  class="!cursor-not-allowed btn-ghost btn-sm text-red-500" />
                    </div>
                @endif
            @endscope
        </x-table>
    </x-card>

ERROR

    VM796:19 Uncaught TypeError: this.selection is not iterable
    at Proxy.isPageFullSelected (eval at safeAsyncFunction (livewire.js?id=87e1046f:1176:21), <anonymous>:19:41)
    at eval (eval at safeAsyncFunction (livewire.js?id=87e1046f:1176:21), <anonymous>:44:38)
    at livewire.js?id=87e1046f:1521:9
    at releaseNextTicks (livewire.js?id=87e1046f:1529:24)
    at livewire.js?id=87e1046f:1516:9
isPageFullSelected @ VM796:19
eval @ VM796:44
(anonymous) @ livewire.js?id=87e1046f:1521
releaseNextTicks @ livewire.js?id=87e1046f:1529
(anonymous) @ livewire.js?id=87e1046f:1516
setTimeout (async)
(anonymous) @ livewire.js?id=87e1046f:1515
livewire.js?id=87e1046f:4275 

       POST https://crm-kappa-ten.vercel.app/livewire/update 500 (Internal Server Error)
sendRequest @ livewire.js?id=87e1046f:4275
send @ livewire.js?id=87e1046f:4041
(anonymous) @ livewire.js?id=87e1046f:4186
createAndSendNewPool @ livewire.js?id=87e1046f:4182
(anonymous) @ livewire.js?id=87e1046f:4158
(anonymous) @ livewire.js?id=87e1046f:4221
setTimeout (async)
bufferPoolingForFiveMs @ livewire.js?id=87e1046f:4220
add @ livewire.js?id=87e1046f:4155
requestCommit @ livewire.js?id=87e1046f:4229
(anonymous) @ livewire.js?id=87e1046f:4442
update @ livewire.js?id=87e1046f:9699
set @ livewire.js?id=87e1046f:9715
setValue @ livewire.js?id=87e1046f:3343
(anonymous) @ livewire.js?id=87e1046f:3360
handler4 @ livewire.js?id=87e1046f:3166
VM609:20 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at VM609:10:43
    at livewire.js?id=87e1046f:4261:54
    at Array.forEach (<anonymous>)
    at fail (livewire.js?id=87e1046f:4261:39)
    at sendRequest (livewire.js?id=87e1046f:4298:7)
    at async RequestPool.send (livewire.js?id=87e1046f:4041:7)

[cooffeeRequired]

@robsontenorio please check it

[cooffeeRequired]

Laravel v11.13.0 (PHP v8.2.16)