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);
    }
}

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>

<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"

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()

->multiple()

->searchable()

->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>

<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.

3 Replies

Dennis Koch•10mo ago

->searchable() or ->multiple() use a non-native select. So it sounds like you didn't include all the JS mentioned in the installation guide. You probably also have a JS error in your console?

LeandroFerreira•10mo ago

Did you check it out as Dennis said? Did you follow these sections? https://filamentphp.com/docs/3.x/forms/installation https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component

Installation - Form Builder - Filament

Adding a form to a Livewire component - Form Builder - Filament

GrandadEvansOP•10mo ago

@Leandro Ferreira @Dennis Koch Wow! You two rock! I thought I'd followed all of the installation docs (in fact all the docs). I had the wrong assumption about having to go through the separate installation instructions if I installed the entire FilamentPhp package. Looking back, I was just getting started with Filament then so probably missed something. I'd better go through the installation steps for everything, and see what else I've missed. Thank you both again for taking the time to reply. John

Gaming

Programming

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