Filament•2mo ago

Way to only allow numeric in search dropdown for filament select element?

Hello! I have this select for Zipcode that populates after the user types inside the searchable() search options dropdown. To enhance my accessibility for a screen reader, I want to disable non-numbers, so that we don't run into as many issues. Is there a way to do this? I'd love any tips on how to modify/validate the search field on a select. Here's my code:

 Select::make('zip_code_id')
     ->searchable(fn)
     ->native(false)
     ->getSearchResultsUsing(fn ($livewire, string $search) => $livewire->agency->approved_zip_codes()
        ->where('zip_codes.code', 'like', "%{$search}%")
        ->limit(20)
        ->pluck('zip_codes.code', 'county_zip_code.zip_code_id')
        ->toArray()
     )
     ->required()
     ->label('Zip/Postal Code of the Request')
     ->validationAttribute('zip/postal code')
     ->reactive()
...

 Select::make('zip_code_id')
     ->searchable(fn)
     ->native(false)
     ->getSearchResultsUsing(fn ($livewire, string $search) => $livewire->agency->approved_zip_codes()
        ->where('zip_codes.code', 'like', "%{$search}%")
        ->limit(20)
        ->pluck('zip_codes.code', 'county_zip_code.zip_code_id')
        ->toArray()
     )
     ->required()
     ->label('Zip/Postal Code of the Request')
     ->validationAttribute('zip/postal code')
     ->reactive()
...

8 Replies

CrispyOP•2mo ago

Bump, is there a way to only allow numbers to be input?

SnaggyDainc•2mo ago

how's

->numeric()

->numeric()

will work for you?

toeknee•2mo ago

As above... also add a rule numeric too if you don't want the up/down arrows

CrispyOP•5w ago

Yeah that was my guess too, but it's not on select.

ChesterS•5w ago

You can add this to your select

->extraAttributes([
    'x-on:keydown' => 'if($event.which < 48 || $event.which > 57) $event.preventDefault()'
])

->extraAttributes([
    'x-on:keydown' => 'if($event.which < 48 || $event.which > 57) $event.preventDefault()'
])

this is just some JS to prevent non-numbers from working. Not sure if the code itself can be improved (i'm not great at JS) This is obviously not 'secure' - just a UX improvement

CrispyOP•5w ago

Thank you for this suggestion, this worked great for normal key presses, but for some reason when using the VoiceOver Screen reader I still get this on arrowdown:

ChesterS•5w ago

Sorry I've never had to deal with VoiceOver Screen so I don't know 😦 (I don't even know how to test this). Maybe a different event (other than keydown ?) BTW there's a bug in the above suggestion - it also ignores the backspace so you can't delete anything 😅

Alex•4w ago

I haven't tried this but you could probably extend the component and add a new method. That's where I would start, but I'm a newbe to Filament.

Gaming

Programming

Way to only allow numeric in search dropdown for filament select element?

Did you find this page helpful?