Multi-select Filter Indicator: How to remove a single selection (not all) when clicking "×"?
🧩 What I am trying to do:
I'm using a MultiSelect inside a Filter::make() form to allow filtering records by multiple services. Each selected service shows as a separate indicator, and I want to allow users to remove only one of those selected services by clicking "×" on the corresponding indicator, without clearing the whole filter.
🔧 What I did so far:
I followed Filament's indicateUsing() approach to return multiple indicators like this:
Filter::make('services')
->form([
MultiSelect::make('services')
->label('Filter by Services')
->options(Service::pluck('service_name', 'id'))
->searchable()
->preload(),
])
->query(function (Builder $query, array $data) {
if (! isset($data['services']) empty($data['services'])) return;
$query->whereHas('services', fn ($q) =>
$q->whereIn('services.id', $data['services'])
);
})
->indicateUsing(function (array $data) {
if (empty($data['services']) !is_array($data['services'])) {
return [];
}
return collect($data['services'])->map(function ($serviceId) {
$service = Service::find($serviceId);
if (! $service) return null;
return \Filament\Tables\Filters\Indicator::make($service->service_name)
->removeField('services'); // Tried also ->removeField('services', $serviceId) but same result
})->filter()->values()->all();
});
😖 My issue:
The indicators display correctly, and I see one per selected service. But when I click "×" on any indicator, it clears the
entire services filter, instead of just removing the one I clicked.
💡 Expected behavior:
Clicking "×" on any service indicator should just remove that one service from the MultiSelect field, not clear all
selections.
🙏 Any guidance on whether this is possible natively, or do I need to build a custom filter/modal?
Thank you in advance!
8 Replies
Looks like a bug
Thanks @toeknee 🙏 — I’ve been thinking the same.
I’ve tried all possible combinations with removeField() — like:
1) removeField('services') → clears everything
2) removeField('services', $id) → still removes the entire array
3) Tried faking individual keys like removeField('removedservice' . $id) but couldn’t find a clean way to update the real state from a filter context
Also realized afterStateUpdated() doesn’t work for filters, only for forms.
If anyone has a workaround (even hacky) or pattern for removing just one selected value from a MultiSelect filter via indicators, I’d love some guidance. 🙏
Or if this just isn’t possible yet in Filament, I’m happy to explore alternatives like a custom modal-based filter if needed.
Is it maybe because of the
MultiSelect?
You should've seen a message like
UseYou could try to use the SelectFilter with multiple instead and see if it behaves the same? 🤔Selectwith themultiple()method instead.
@dissto i am facing the same problem as @Sahil Sayyad , Tried the above thing but same result.
Any solutions?
@dissto @toeknee I'm encountering the same issue as. I tried the suggested solution above, but it didn’t work for me. Are there any alternative fixes or workarounds?
Again: It's probably a bug. If nobody reports it, it won't be fixed
Can anyone confirm if there's a known fix or workaround for this issue?
This does seem like an issue. Could someone attach/report this on the official GitHub?