IE10’s lousy support for datalists

Recently saw a great datalist experiment. The textual version seemed to work on all major browsers and this was also confirmed by the related caniuse page, so I decided to use it in production. (For Safari, I was considering one of the available shims.) The current project I’m working on, is pretty cutting edge, so there was no reason not to use datalist instead of some javascript autocomplete/autosuggest solution. The proof of concept worked, but when it came to implementing in a fully functional page, problems started surfacing…

If you have access to IE10, I suggest you view this page in it and see for yourself! As a bonus, the options don’t even show up in ie when in an iframe. View directly on jsbin or use Focus button.

So what’s the problem with IE10’s support of <datalist>?

  • IE shows options on input focus instantly. This makes use with autofocus fields impossible. Other browsers display on 2nd click or as typing begins, as one would expect.
  • IE does not trigger any change or input events when an option is selected keyboard and no events you could capture what-so-ever when on option is selected by mouse. The input’s value is updated, but change and input events only trigger once the input is blurred.

So what?

The problem is that IE’s implementation is buggy and a more controlled fallback would be better suited for production environments. Unfortunately feature detection will indicate that IE10 supports datalists and I can’t think of any way to detect the flaws. This is particularly bad, after all we would like to automatically use the native datalist as soon as the bugs are ironed out.