Filament•2mo ago

Searchable and reactive select fields not functioning

So essentially what I'm trying to achieve is having a form where everything is disabled except the first field, which after getting selected enables the next field and loads options based on the first selection, which then enables the next. This all works as intended until I make the fields searchable(). Once I do that, after I select the company, the next field goes from dark to light, indicating that it's no longer disabled, but clicking it does nothing. I can't select anything or really interact with it. Again, if I remove the searchable(), then the field gets enabled as intended, showing the relevant options, and it all works. Any help would be much appreciated!

                Forms\Components\Select::make('company_id')
                    ->label('Company')
                    ->options(\App\Models\Company::all()->pluck('name', 'id'))
                    ->reactive()
                    ->afterStateUpdated(function (callable $set) {
                        $set('product_id', null);
                        $set('tos_id', null);
                    })
                    ->searchable()
                    ->required(),

                Forms\Components\Select::make('product_id')
                    ->label('Product')
                    ->disabled(fn (callable $get) => !$get('company_id'))
                    ->afterStateUpdated(function (callable $set) {
                        $set('tos_id', null);
                    })
                    ->searchable()
                    ->getSearchResultsUsing(fn (string $search, callable $get): array =>
                    \App\Models\Product::where('company_id', $get('company_id'))
                        ->where('name', 'like', "%{$search}%")
                        ->limit(50)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->required(),

                Forms\Components\Select::make('company_id')
                    ->label('Company')
                    ->options(\App\Models\Company::all()->pluck('name', 'id'))
                    ->reactive()
                    ->afterStateUpdated(function (callable $set) {
                        $set('product_id', null);
                        $set('tos_id', null);
                    })
                    ->searchable()
                    ->required(),

                Forms\Components\Select::make('product_id')
                    ->label('Product')
                    ->disabled(fn (callable $get) => !$get('company_id'))
                    ->afterStateUpdated(function (callable $set) {
                        $set('tos_id', null);
                    })
                    ->searchable()
                    ->getSearchResultsUsing(fn (string $search, callable $get): array =>
                    \App\Models\Product::where('company_id', $get('company_id'))
                        ->where('name', 'like', "%{$search}%")
                        ->limit(50)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->required(),

Solution:

add in the product_id select

->searchable(fn (Forms\Get $get) => filled($get('company_id')))

->searchable(fn (Forms\Get $get) => filled($get('company_id')))

You should also use live(), Get, Set if you are using filament v3. Check the docs...

Jump to solution

4 Replies

LeandroFerreira•2mo ago

are you using the panel builder or only the form builder?

Vexmachina•2mo ago

This is in a Resource component in the admin panel, essentially the default suggested for creating/editing records

Solution

LeandroFerreira•2mo ago

add in the product_id select

->searchable(fn (Forms\Get $get) => filled($get('company_id')))

->searchable(fn (Forms\Get $get) => filled($get('company_id')))

You should also use live(), Get, Set if you are using filament v3. Check the docs

Vexmachina•2mo ago

That worked, thank you!

Gaming

Programming

Searchable and reactive select fields not functioning