Datalist Support in Safari

As you can see from above this is totally unusable on iPhone for something where only the title would have any recognisable context.

For example students completing an online enrolment form at a college need to select may options where the code is just an ID number from the database so without the description it is impossible to know what any of them mean.

With other browsers/browser engines if the code and description are the same (such as title: Mr, Mrs) then only the code is shown but where they differ then both are always displayed.

Data lists enhance usability as for long lists they make it much easier to find the corresponding option and I tend to add these to all drop-downs for consistency but on iPhone it has the opposite effect so I have to use JS to detect webkit and convert all data lists to select lists.

I used to do this for IE11 but shouldn't need to still do this for Safari in 2024.

I can't understand why it doesn't have proper support for this as a data list seems somewhat fundamental.

Thanks, I have submitted some feedback.

It would be good if they could fix it one day as it does seem like quite a limitation and it is the only one I am really aware of.

If you look at compatibility charts they tell you data lists are supported in Safari but when they don't show you what option you are selecting I can't really see how this could be called supported.

Data lists are more suited to longer lists of options where the code/ID is more likely to be meaningless as is the ID from the database.

Perhaps the issue here is that it is actually ok on Safari on a Mac as looking at your screenshots it looks ok on Mac so must only affect WebKit browsers on iOS but then that is still quite a chunk of users.

Should Safari not really render consistently between Mac Os and iOS and does this make it perhaps more like a long forgotten bug.

I'm surprised there are no more posts about it.

Hello

As far as I am aware data lists have never worked properly on iOS so I have to use some JavaScript manipulation to adapt the page to fall back to basic select lists in order to get them to show the descriptions for each option but then you lose the main benefit of a datalist which is that it searches the list and reduces the options as you type finding that word anywhere in the available options.

It's the same in 17.4.1 and also on a 17.5 beta device I have.

I used to have to do the workarounds for IE11 but I can't see why a modern browser in 2024 does not properly support the web standards ratified in 2011: https://www.w3.org/TR/2011/WD-html5-20110405/the-button-element.html#the-datalist-element

Hello

Perhaps the issue only affects iPhones and iPads but this is what the 3rd example is like in Safari:

Then this is the 4th example:

It’s the same in Edge but this is also using WebKit:

Then 4: