7 ms·

Just a heads up but datalist is not really a great solution if you need a strong contract. The user can still type whatever they want into the field and there i

Just a heads up but datalist is not really a great solution if you need a strong contract. The user can still type whatever they want into the field and there is no fuzzy filtering or typo mitigation. Once you add those requirements, a library that gives you a more fully featured combobox is likely going to make a lot of sense in your project.

sarchertech 27d ago
There’s still browser/OS typo mitigation.
vlucas 27d ago
Very true, and ran into this one specifically myself when going down the "HTML can do this!" road. HTML can NOT, in fact, replace a good combobox with search input. Datalist has significant shortcomings. I wound up using a React island for this single input inside otherwise normal HTML, despite my own objections, because it really it just that much better than the native options.
reaperducer 27d ago
That's the whole sanitize vs. validate argument debate that keeps coming up. How you handle it is project-dependent. But if you're doing a real web site, not an SPA, you can show an error/help page, or re-load the current page with the error/help message.
- Arch-TK 27d ago
  This is specifically about good UX not about security, validation, or sanitisation.
- yurishimo 27d ago
  For sure; and it will continue to be an issue as long as we allow old browsers to exist. I’m definitely not saying you shouldn’t have backend validation, just highlighting where the frontend validation provided by the browser is not as universal as it might appear on the surface. FWIW I find the native date picker to also still be quite poorly performing in practice, despite quite robust browser support. I wish it worked better but for many reasons, I still see plenty of users (or bots?) who submit dates in the wrong format for whatever reason. My current hypothesis is largely focused on password managers though since they will often do whatever they want directly in the value attribute of an input element.
Groxx 27d ago
Wow, yeah - years later and I still get nothing in Firefox, and support is quite spotty in general (and clearly still buggy): https://caniuse.com/?search=datalist https://caniuse.com/?search=datalist Hard pass, that's essentially unusable.
theandrewbailey 27d ago
Not having fuzzy filtering could be OK if you could filter the datalist and force it to display anyway. (There is no way to force it to display.) I gave up and used <ul> or <ol> instead.

sarchertech 27d ago

There’s still browser/OS typo mitigation.

vlucas 27d ago

Very true, and ran into this one specifically myself when going down the "HTML can do this!" road. HTML can NOT, in fact, replace a good combobox with search input. Datalist has significant shortcomings. I wound up using a React island for this single input inside otherwise normal HTML, despite my own objections, because it really it just that much better than the native options.

reaperducer 27d ago

That's the whole sanitize vs. validate argument debate that keeps coming up. How you handle it is project-dependent. But if you're doing a real web site, not an SPA, you can show an error/help page, or re-load the current page with the error/help message.

Arch-TK 27d ago
This is specifically about good UX not about security, validation, or sanitisation.
yurishimo 27d ago
For sure; and it will continue to be an issue as long as we allow old browsers to exist. I’m definitely not saying you shouldn’t have backend validation, just highlighting where the frontend validation provided by the browser is not as universal as it might appear on the surface. FWIW I find the native date picker to also still be quite poorly performing in practice, despite quite robust browser support. I wish it worked better but for many reasons, I still see plenty of users (or bots?) who submit dates in the wrong format for whatever reason. My current hypothesis is largely focused on password managers though since they will often do whatever they want directly in the value attribute of an input element.

Groxx 27d ago

Wow, yeah - years later and I still get nothing in Firefox, and support is quite spotty in general (and clearly still buggy): https://caniuse.com/?search=datalist https://caniuse.com/?search=datalist Hard pass, that's essentially unusable.

theandrewbailey 27d ago

Not having fuzzy filtering could be OK if you could filter the datalist and force it to display anyway. (There is no way to force it to display.) I gave up and used <ul> or <ol> instead.