Filament Searchable Select dependencies

I've been playing around with an attempt to create three Select components in a Filament form where the chosen values in the first Select define the options in the second select, and the options in the second select define the third.

And I got it working. Nice!

                Forms\Components\Select::make('country_id')
                    ->required()
                    ->options(Country::orderBy('name')->pluck('name', 'id'))
                    ->searchable(true)
                    ->live(),
                Forms\Components\Select::make('state_id')
                    ->required()
                    ->disabled(fn (Forms\Get $get) : bool => ! filled($get('country_id')))
                    
                    ->options(fn(Forms\Get $get) =>  State::where('country_id', (int) $get('country_id'))->orderBy('name')->pluck('name', 'id'))
                    
                    ->live(),            
                Forms\Components\Select::make('city_id')
                    ->required()
                    ->disabled(fn (Forms\Get $get) : bool => ! filled($get('state_id')))
                    ->options(fn(Forms\Get $get) =>  City::where('state_id', (int) $get('state_id'))->orderBy('name')->pluck('name', 'id'))
                    ->live(),

However since there are an awful lot of cities in the world, it would be nice to have for all the Select components a search option. When I chain the 'searchable()' method to the first Select, it works as expected, however when I chain the method to the second field, the second field is suddenly 'read only', same problem with the thirds one.

Does anyone has an idea what is the cause of this problem? And even better, how to solve it?

Thanks in advance. Wilko

LaryAI

2 years ago

Level 58

It seems like you're encountering an issue with the searchable() method on dependent select components in Filament. The searchable() method should not make the select fields read-only, so this behavior is unexpected.

One possible cause for this issue could be a JavaScript error or conflict that's preventing the searchable functionality from initializing correctly on the dependent selects. To troubleshoot this, you can:

Check your browser's developer console for any JavaScript errors that might be occurring when the page loads or when you interact with the selects.
Ensure that you are using the latest version of Filament and that all assets are published and up-to-date.

If everything seems to be in order on the JavaScript side, you might want to try a different approach to make the selects searchable. Here's an example of how you can set up your selects to be searchable and dependent on each other:

Forms\Components\Select::make('country_id')
    ->required()
    ->options(Country::orderBy('name')->pluck('name', 'id'))
    ->searchable()
    ->reactive()
    ->afterStateUpdated(fn (callable $set) => $set('state_id', null)) // Reset state_id when country_id changes
    ->afterStateUpdated(fn (callable $set) => $set('city_id', null)), // Reset city_id when country_id changes

Forms\Components\Select::make('state_id')
    ->required()
    ->options(fn (Forms\Get $get) => State::where('country_id', $get('country_id'))->orderBy('name')->pluck('name', 'id'))
    ->searchable()
    ->reactive()
    ->disabled(fn (Forms\Get $get) : bool => !filled($get('country_id')))
    ->afterStateUpdated(fn (callable $set) => $set('city_id', null)), // Reset city_id when state_id changes

Forms\Components\Select::make('city_id')
    ->required()
    ->options(fn (Forms\Get $get) => City::where('state_id', $get('state_id'))->orderBy('name')->pluck('name', 'id'))
    ->searchable()
    ->disabled(fn (Forms\Get $get) : bool => !filled($get('state_id'))),

In this example, I've added the reactive() method to the selects, which ensures that the form re-renders when the value changes. This is important for dependent selects to update their options accordingly. Additionally, I've used the afterStateUpdated callback to reset the dependent select values when the parent select value changes.

If you're still facing issues, it might be helpful to check the Filament documentation or their support channels for any known issues or updates regarding the searchable() method on dependent selects.