Close multiselect

Currently, to close a multiselect component, the user must click outside the input field. While this interaction is manageable on desktop—where users can easily click outside the input—it becomes less intuitive on mobile devices, particularly on Android.

On mobile, users often notice the dropdown arrow but tapping it does not close the multiselect. This results in confusion and a poor user experience, as there is no clear visual cue or gesture to dismiss the options list.

Question:
Has anyone encountered and resolved this usability issue without overriding the Blade template? I am specifically looking for a solution that enhances the mobile experience without the need to rewrite the component's view.

Solution

I recommend using afterStateHydrated

use Filament\Forms\Components\Select;

Select::make('tags')
    ->multiple()
    ->afterStateHydrated(function ($component) {
        $component->extraAttributes([
            'x-init' => <<<JS
                const arrow = $el.parentElement.querySelector('[data-select-toggle]');
                if (arrow) {
                    arrow.addEventListener('click', (e) => {
                        e.stopPropagation();
                        $el.closest('[x-data]').__x.$data.open = !$el.closest('[x-data]').__x.$data.open;
                    });
                }
            JS,
        ]);
    })

use Filament\Forms\Components\Select;

Select::make('tags')
    ->multiple()
    ->afterStateHydrated(function ($component) {
        $component->extraAttributes([
            'x-init' => <<<JS
                const arrow = $el.parentElement.querySelector('[data-select-toggle]');
                if (arrow) {
                    arrow.addEventListener('click', (e) => {
                        e.stopPropagation();
                        $el.closest('[x-data]').__x.$data.open = !$el.closest('[x-data]').__x.$data.open;
                    });
                }
            JS,
        ]);
    })

like this

Jump to solution

Close multiselect

Solution

I recommend using afterStateHydrated

use Filament\Forms\Components\Select;

Select::make('tags')
    ->multiple()
    ->afterStateHydrated(function ($component) {
        $component->extraAttributes([
            'x-init' => <<<JS
                const arrow = $el.parentElement.querySelector('[data-select-toggle]');
                if (arrow) {
                    arrow.addEventListener('click', (e) => {
                        e.stopPropagation();
                        $el.closest('[x-data]').__x.$data.open = !$el.closest('[x-data]').__x.$data.open;
                    });
                }
            JS,
        ]);
    })

use Filament\Forms\Components\Select;

Select::make('tags')
    ->multiple()
    ->afterStateHydrated(function ($component) {
        $component->extraAttributes([
            'x-init' => <<<JS
                const arrow = $el.parentElement.querySelector('[data-select-toggle]');
                if (arrow) {
                    arrow.addEventListener('click', (e) => {
                        e.stopPropagation();
                        $el.closest('[x-data]').__x.$data.open = !$el.closest('[x-data]').__x.$data.open;
                    });
                }
            JS,
        ]);
    })

like this

Jump to solution

Close multiselect

Close multiselect

Similar Threads

Similar Threads

Similar Threads