Add datalist test

[jamesarosen]

I'd like to know whether the browser has native datalist support. I'm not exactly sure how to represent this as a Modernizr test, but the following works with jQuery:

var datalist = $('<datalist id="_modernizrDatalist" />')
               .appendTo('body');
var input    = $('<input list="_modernizrDatalist" id="_modernizrDatalistInput" />')
               .appendTo('body');
datalistSupport = typeof($('#_modernizrDatalistInput').attr('list')) === 'object'

Non-supporting browsers will ignore the attribute or leave it as a string. Supporting browsers will return the actual HTMLDataListElement object.

I tried emulating this with document.createElement but couldn't get the supporting browsers (Opera 9.5+) to make the link.

[aFarkas]

I'm also interested to see, how you do a test. Safari 5.0.3 does seem to have implemented all property interfaces (list on input and options on datalist + display-style on datalist). But they didn't have implemented the UI, so no real feature.

[aFarkas]

I found valid test for this:

$.support.datalistProp = ('list' in document.createElement('input') && 'options' in document.createElement('datalist'));
//supports full datalist
$.support.datalist = ($.support.datalistProp && window.HTMLDataListElement);

[jamesarosen]

Great stuff, aFarkas!

[miketaylr]

Awesome. I'm just going to use !!(document.createElement('datalist') && window.HTMLDataListElement) because I'm lazy. Thanks!

[gmoulin]

Fennec (Firefox Mobile), version 2.1.1 have a false positive for datalist support

the tag is supported but there is no UI implemented for it...

[paulirish]

Just tried these on testling...

test code:

var test = require('testling');

test('datalist', function (t) {


    var options     = 'options' in document.createElement('datalist')
    var listoptions = ('list' in document.createElement('input') && 'options' in document.createElement('datalist'))
    var globalobj   = !!window.HTMLDataListElement;
    var shivglobobj = !!(document.createElement('datalist') && window.HTMLDataListElement)

    t.log(['basic `"options" in` check :', options     ])
    t.log(['also checking `"list" in`..:', listoptions ])
    t.log(['window.HTMLDataListElement :', globalobj   ]);
    t.log(['shiv + constructor ^       :', shivglobobj ]);

    t.end();

});

results:

iexplore/6.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
iexplore/7.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
iexplore/8.0       
  Log: ["window.HTMLDataListElement :",false]
  Log: ["basic `\"options\" in` check :",false]
  Log: ["shiv + constructor ^       :",false]
  Log: ["also checking `\"list\" in`..:",false]
iexplore/9.0       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]


chrome/13.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]
  Log: ["window.HTMLDataListElement :",false]
chrome/14.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["shiv + constructor ^       :",false]
chrome/15.0        
  Log: ["basic `\"options\" in` check :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]
chrome/canary       
  Log: ["basic `\"options\" in` check :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["also checking `\"list\" in`..:",false]
  Log: ["shiv + constructor ^       :",false]


opera/10.0         
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
opera/10.5         
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
opera/11.0         
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
opera/11.5         
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["window.HTMLDataListElement :",true]
opera/next         
  Log: ["window.HTMLDataListElement :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["shiv + constructor ^       :",true]


safari/5.0.5       
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["shiv + constructor ^       :",false]
  Log: ["window.HTMLDataListElement :",false]
  Log: ["basic `\"options\" in` check :",true]
safari/5.1         
  Log: ["shiv + constructor ^       :",false]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["window.HTMLDataListElement :",false]



firefox/4.0         0/0    0 % ok
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["shiv + constructor ^       :",true]
  Log: ["basic `\"options\" in` check :",true]
  Log: ["window.HTMLDataListElement :",true]
firefox/5.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/6.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/7.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]
firefox/8.0         0/0    0 % ok
  Log: ["basic `\"options\" in` check :",true]
  Log: ["also checking `\"list\" in`..:",true]
  Log: ["window.HTMLDataListElement :",true]
  Log: ["shiv + constructor ^       :",true]

Demo page:

• http://miketaylr.com/test/datalist.html

also

• manual testing shows Fennec (stable and beta) supporting datalist
• there are a few polyfills. chris has one of them http://css-tricks.com/15346-relevant-dropdowns-polyfill-for-datalist/

[paulirish]

So.. summary...

• Safari port of webkit (but not chrome) implements the new additions to the <input> but not the datalist element and it certainly doesnt work there.
• FF is all peachy (including mobile)
• Chrome doesnt touch the stuff (but will.. crbug.com/20226)
• Opera is all Peachy
• Apparently IE10 supports it but testing IE10 is so ridiculously hard I can't be bothered

And Modernizr technically already has a test for this... Modernizr.input.list which false positives in Safari...

What this means is that we'll augment the list test to also do the shiv'd constructor technique that @miketaylr provided. Dig?

[paulirish]

Reported the safari false positive here: http://webk.it/74252

[paulirish]

Closed by cb98fb9 Boom.

then in 6d6d14e I made it more obvious we already have datalist in the core tests.

[paulirish]

http://demo.agektmr.com/datalist/ it's in canary now.

but fails our feature detect. i'm working with the chrome engineer to resolve that. :)