Hacker News Reader

Comment by redhale | Hacker News Reader

I was unaware of Datalist, but it does not appear to work on Chrome Android, at least not really.

I see the options in the keyboard [0], in the place where autocorrect suggestions appear. But that's the first time I have EVER seen that in a mobile web UI for a page's form control (aside from password auto-fill apps that use that same space).

I don't hate it -- it's actually much nicer than trying to awkwardly scroll a poorly built custom JS drop-down. But I have no confidence that all normal users would figure out how to use it. So I think it's DOA for mobile.

Also, it is flat-out not supported on Firefox Android [1].

[0] https://imgur.com/a/Ecb4503

[1] https://caniuse.com/?search=datalist

View on HN

Hey browser makers, can we please be able to style the datalist dropdown?

Also: https://adrianroselli.com/2023/06/under-engineered-comboboxe...

This is why these solutions take so long to catch on.

JavaScript is pretty well standardized, html and CSS is less so.

CSS is easier than JavaScript.

Here is an example of JavaScript-free CSS motion:

https://egbert.net/blog/index.html

CSS may be easier, but that's irrelevant to OP's point—it's less standardized across browsers, so if you have to support a bunch of different browsers of varying ages it's much easier to write JavaScript with boring CSS (and even transpile it if you want to use newer features!) than it is to polyfill all the missing CSS features you'd need to use it instead of JavaScript.

I wonder if adding autocomplete="off" to the input element changes the behaviour? It is in any case required for sanely using datalists. Otherwise the value selection history will be appended to the dropdown list (observed in Chromium).

Also, datalists still need JS in some cases like when a default value is set. I have the workarounds and browser quirk notes here in the (to-be-launched) new LibreOffice website code: https://git.libreoffice.org/infra/libreofficeorg/+/835a5cc59...

Good news is that a Firefox dev plans to look into improving datalist behaviour, so only a single click would be enough to display the list.

Have you looked above the keyboard?

For me it shows the options above the keyboard where normally word suggestions are shown.

This thing where the datalist options show in the keyboard is some recent thing, i.e. a few months ago. It used to be "normal" before that, but I guess someone wanted to change things only for the sake of changing things

I really wish data list was better, shipped it on an admin dashboard for something, and while it works fine in safari it’s a bit broken in several ways on chrome and Firefox, leading me to need to replace it with JavaScript

works fine on chrome android

Didn’t work for me either on iOS.

Reply on news.ycombinator.com