Select with native false and populate after rendered
I have an select which gets populated by the selected value of another select in the form.
->options(function (Get $get) {
return Unit::where('unit_group_id', $get('unit_group_id'))->pluck('name', 'id');
})
I have this code to load the units based on the selected value unit_group_id of the other select.
But with native false the select is not populated, but when I remove the native false it works.
I could not find the reason in the docs why this does not work. Any thoughts of this?
8 Replies
same issue i face now. Once I introduce $get utility the native(false) doesn't work properly. HAve you found a solution?
Use
->searchable() and getResultsUsing(). I think there is an issue that Choices.js cannot be re initializedI tried and it works fine,
Could you share your full form code
->searchable works, and with preload to populate the options. Where would you use the getResultsUsing()?
->filters([
SelectFilter::make('school_class_and_section')
->form([
Select::make('school_class_id')
->label('Class')
->native(false)
->live()
->relationship(
'school_classes',
'name',
modifyQueryUsing: fn (Builder $query) => $query
->whereBelongsTo(Filament::getTenant())
)
->afterStateUpdated(fn (Set $set) => $set('section_id', null)),
Select::make('section_id')
->label('Section')
->live()
->searchable()
->preload()
// ->native(false) // NOTE: ->native(false) Not loading because of $get ->placeholder(fn (Get $get): string => empty($get('school_class_id')) ? 'First select a class' : 'Select an option') ->relationship( 'sections', 'name', modifyQueryUsing: fn (Builder $query, Get $get) => $query ->where('sections.school_class_id', $get('school_class_id')) ), I guess you've seen this before in my post. It's a filter form. The first Select::make() works completely fine. but the second Select::make() doesn't once $get is introduce. I tried it without $get and it did work as well. That's the limit of diagnosing skill i guess
// ->native(false) // NOTE: ->native(false) Not loading because of $get ->placeholder(fn (Get $get): string => empty($get('school_class_id')) ? 'First select a class' : 'Select an option') ->relationship( 'sections', 'name', modifyQueryUsing: fn (Builder $query, Get $get) => $query ->where('sections.school_class_id', $get('school_class_id')) ), I guess you've seen this before in my post. It's a filter form. The first Select::make() works completely fine. but the second Select::make() doesn't once $get is introduce. I tried it without $get and it did work as well. That's the limit of diagnosing skill i guess
Didnt it work with the options?
It did work. But the placeholder condition didn't. overall using native gives the best result for now
The issue with the placeholder that choices.js (used with native(false)) does not receive an updated version of placeholder (limitation of the setup as of now). Thats why I suggested you use either hint or helper to show the user your message.
and you could clear the native select using ->afterStateUpdated() in the first select
or Use
canSelectPlaceholder()yeah. That's why i added it. sometimes though, there might be scenarios where i would need to clear only the section. Only native(false) can solve all scenarios. Will probably wait for an update or something. For now using natuve is okay.