Choices offline "option is not defined"

[lucas-davi]

maryUI version

1.35.6

daisyUI version

4.12.10

Livewire version

3.5.6

What browsers are affected?

Chrome

What happened?

after selecting offline option, i get the following error in console:

and option selected not show in input:

[robsontenorio]

It does not happen here https://mary-ui.com/docs/components/choices#searchable-frontend

[lucas-davi]

If I create the options in the .blade file it works, but if I create the options in a component it returns the error.

in component:

public array $o;

$this->o = ModelsEditor::get()->toArray();

in blade

<x-choices-offline label="Single" wire:model="name" :options="$o" single />

[iurigustavo]

Can you share full code?

[lucas-davi]

component Editor

<?php

namespace App\Livewire;

use App\Models\Editor as ModelsEditor;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Collection;
use Livewire\Attributes\On;
use Livewire\Component;

class Editor extends Component
{
    public bool $modal = false;

    public string $description = '';

    public string $name = '';

    public ?ModelsEditor $editor;

    public array $o;

    public function render(): View
    {
        return view('livewire.editor');
    }

    #[On('show-modal')]
    public function open(): void
    {
        $this->editor = ModelsEditor::find(1);

        $this->description = $this->editor->description;

        $this->o = ModelsEditor::get()->toArray();

        $this->modal = true;
    }

    public function save()
    {
        $this->editor->update([
            'description' => $this->description
        ]);

        $this->modal = false;
    }
}

view editor

<div>
    <x-modal wire:model="modal" class="backdrop-blur">
        <form wire:submit="save">
            <x-editor wire:model="description" label="Description" />

            <div class="divider"></div>

            <x-choices-offline label="Single" wire:model="name" :options="$o" single />

            <button type="submit">Save</button>

            <x-button label="Cancel" @click="$wire.modal = false" class="mt-6" />
        </form>
    </x-modal>
</div>

[lucas-davi]

another thing, don't you think it's interesting that choices also accept eloquent collection?

<?php

namespace App\Livewire;

use App\Models\Editor as ModelsEditor;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Collection;
use Livewire\Attributes\On;
use Livewire\Component;

class Editor extends Component
{
    public bool $modal = false;

    public string $description = '';

    public string $name = '';

    public ?ModelsEditor $editor;

    public Collection $o;

    public function render(): View
    {
        return view('livewire.editor');
    }

    #[On('show-modal')]
    public function open(): void
    {
        $this->editor = ModelsEditor::find(1);

        $this->description = $this->editor->description;

        $this->o = ModelsEditor::take(5)->get();

        $this->modal = true;
    }

    public function save()
    {
        $this->editor->update([
            'description' => $this->description
        ]);

        $this->modal = false;
    }
}

returns the error:

[robsontenorio]

The error says “null given”.

[lucas-davi]

property $o value

[ANJANS]

This is the same problem I posted here https://github.com/robsontenorio/mary/issues/560 , but was not resolved. The same code works with x-choices but not with x-choices-offline

[iurigustavo]

Because of wire:ignore inside editor:

public Collection $o;

public function mount() { $this->editor = ModelsEditor::find(1); $this->description = $this->editor->description; $this->o = collect(); }

 #[On('show-modal')]
public function open(): void
{
    $this->o = ModelsEditor::query()->get();
    $this->modal = true;
}

[iurigustavo]

I have this Macro, can you test?

ex: ModelsEditor::query()->pluckWithIdName('id', 'name');

AppServiceProvider:

 Builder::macro('pluckWithIdName', function ($idColumn = null, $nameColumn = null): Collection {
        return $this->pluck($nameColumn, $idColumn)->map(fn ($value, $id) => ['id' => $id, 'name' => $value])->values();
    });

[lucas-davi]

I added the macro and the mount method, but the result is the same.

observation: doing the query in the blade file, it works

@php
    $os = App\Models\Editor::query()->get();
@endphp

<x-modal wire:model="modal" class="backdrop-blur">
    <form wire:submit="save">
        <x-editor wire:model="description" label="Description" />

        <div class="divider"></div>

        <x-choices-offline label="Single" wire:model="name" :options="$os" single />

        <button type="submit">Save</button>

        <x-button label="Cancel" @click="$wire.modal = false" class="mt-6" />
    </form>
</x-modal>

[iurigustavo]

https://discord.gg/c2Dv8T2X2s MaryUi Discord, (se quiser ajuda posso te ajudar por lá)

[lucas-davi]

i joined discord

[robsontenorio]

Please , let us know what was the solution.