UI Bug: Select Filter with Multiple Options Hidden by overflow: hidden CSS in FiltersLayout::BelowContent

[ZayRTun]

Package

filament/filament

Package Version

v3.2.97

Laravel Version

v11.19.0

Livewire Version

v3.5.4

PHP Version

PHP 8.2.22

Problem description

When using the Select filter component with multiple options enabled in Filament, and setting the filter layout to FiltersLayout::BelowContent, the dropdown containing the options is hidden when placed near the bottom of the viewport. This issue makes it impossible to interact with the dropdown.

Expected behavior

The dropdown should either open above the input field if there’s no space below or adjust its position to ensure it’s visible.

Steps to reproduce

1. Set up a Filament table with filters.
2. Use a Select filter with multiple options enabled.
3. Set the filter layout to FiltersLayout::BelowContent.
4. Place the filter near the bottom of the viewport.
5. Attempt to open the dropdown.

Reproduction repository (issue will be closed if this is not valid)

https://github.com/ZayRTun/filament-issue

Relevant log output

No response

[jimiero]

I confirm this issue

[danharrin]

The table has overflow-hidden to ensure that column headers etc do not overflow it, but this causes the issue

The choices.js package we use for selects in v3 uses absolute for positioning dropdowns, which is affected by hidden overflows

I replaced the select in v4 with a custom one that uses fixed positioning, so the issue is solved by #16638 in v4