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:


8 Replies
Bump, is there a way to only allow numbers to be input?
how's
will work for you?
As above... also add a rule numeric too if you don't want the up/down arrows
Yeah that was my guess too, but it's not on select.

You can add this to your select
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
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:

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 π
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.