FilamentF
Filament•2y ago
GrandadEvans

multiple() & searchable() stops Select from working.

Hi Everyone,
If I run
namespace App\Livewire;

// use statements omitted for brevity

class AdoptionForm extends Component implements HasForms
{
    use InteractsWithForms;

    protected static string $view = 'livewire.adoption-form';

    public ?Adoption $adoptionForm = null;

    public ?array $data = [];

    public function mount(): void
    {
        $this->adoptableCats = Cat::adoptable()->get()->pluck('name', 'id')->toArray();

        $this->form->fill();
    }


    public function form(Form $form): Form
    {
        return $form->schema([
            Select::make('cats')
                ->options($this->adoptableCats)
        ])->statePath('data')
            ->model($this->adoptionForm);
    }
}

I get a working select box with cats names.
<select class="fi-select-input py-1.5 --some-classes-omitted-- disabled:[-webkit-text-fill-color:theme(colors.gray.500)] dark:text-white dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] sm:text-sm sm:leading-6 [&amp;_optgroup]:bg-white [&amp;_optgroup]:dark:bg-gray-900 [&amp;_option]:bg-white [&amp;_option]:dark:bg-gray-900 ps-3" id="data.cats" wire:model="data.cats"><!-- valid options --></select>

If I go into the devtools and manually add the attribute 
multiple="multiple"
then the select becomes a multiple enabled select (not sure if it's the correct format or not, but when I submit the form and dd() from the create method it outputs the multiple selected cat options.

However, if I alter the Select call in the form() method, and add either 
->multiple()

or 
->searchable()

then I get this element
<select x-ref="input" class="h-9 w-full rounded-lg border-none bg-transparent" id="data.cats" multiple="multiple"></select>

with no options visible at all.
Is anybody able to help me out with regards to this problem? I've been working on it for 2 days now, but have had no luck except running around in circles.
Was this page helpful?