Demo is not working on Safari 12.0.1 for me as expected.

[Klyner007]

I tried to run the corresponding demo to this library on a Safari brower on my mac but this did not work. https://mfranzke.github.io/datalist-polyfill/demos/ Is the data list still working on safari? I implemented this in my project but this also did not work.

[mfranzke]

@Klyner007 , thanks for your feedback.

Could you please provide some more information for me to understand the problem you're describing, like e.g. the version of OS and Safari you're testing with and some other information like e.g. whether there are any errors on the console etc.

[Klyner007]

Sure! I am working with safari 12.0.1. The console does not give any errors. I do use macOS version 10.14.1.

Thanks for your help. @mfranzke

[mfranzke]

@Klyner007, well, it works perfectly fine for me on https://mfranzke.github.io/datalist-polyfill/demos/, even though that I've sadly even already have updated to the latest Mac OS version, which brings Safari 12.0.2 - is there anything else that you might be able to tell me on any specifics regarding your setup? And it might be interesting, what the following JavaScript code returns on the console:

'list' in document.createElement('input') && Boolean(document.createElement('datalist') && window.HTMLDataListElement)

[Klyner007]

Hmm, the functionality on Safari might be different from what I expected this to be. Once I click an input, nothing happens (in Chrome a selection menu already appears). In Safari the menu appears when a first character is inserted in the input. Is this how it is supposed to be?

The code returns false.

[kirajhpang]

@Klyner007 is correct, but I don't see any alternative datalist library that act like chrome datalist behavior for safari.

Is this normal behavior?

[mfranzke]

@kirajhpang, agreed. As Safari Technology Preview is supporting the datalist tag (at least basically), I‘ll rework the polyfill to adapt that behaviour with an upcoming release.

[mightyiam]

Thank you, @mfranzke for some (otherwise) good piece of open source code.

Seems to have no affect in Safari 12, both macOS and iOS.

Here is a deployment of my use case with this polyfill included. The input near the bottom is the one with the datalist.

[mfranzke]

Thank you, @mfranzke for some (otherwise) good piece of open source code.

Seems to have no affect in Safari 12, both macOS and iOS.

Here is a deployment of my use case with this polyfill included. The input near the bottom is the one with the datalist.

Thank you, @mfranzke for some (otherwise) good piece of open source code.

Seems to have no affect in Safari 12, both macOS and iOS.

Here is a deployment of my use case with this polyfill included. The input near the bottom is the one with the datalist.

@mightyiam, thanks a lot for your feedback.

Actually the polyfill does work in your application - but the datalist element itself is getting hidden via display: none;

Nevertheless the select element within is being displayed incorrectly, but this would need to get investigated further regarding any application specific styles.

[wattry]

I am expecting the label to be displayed on Safari 12.1.2 however I am only seeing the value.

[mfranzke]

@09wattry, I‘m not totally sure whether I‘m getting your feedback right.

Since Safari 12.1 the datalist functionality is being supported natively, meaning that this polyfill doesn‘t necessarly do anything (except for some shortcomings in EDGE).

So in Safari 12.1.x I do get all the value attributes values (or text IDL) being displayed as entries for both the dropdown and the horizontal suggestions, which us how the Webkit developers decided to integrate this.

[wattry]

@mfranzke Yes it is native but it is not consistent.

1. For situations where you want value and label fields.

<option label="Ryan (09wattry)" value="Ryan"></option>

This shows as:

Chrome: Ryan (09wattry)
EDGE/IE (with polyfill): Ryan (09wattry)
FireFox: Ryan (09wattry)
Safari: Ryan

So if I use safari I cannot search on the label only the value.

[mfranzke]

@09wattry, okay, let me see what the polyfill could do about that - I think that something has been implemented even already (for EDGE as well).

[wattry]

@mfranzke great thanks!