Description

When using the HTML5 platform you can specify a datalist to use with an input:

<input list="cities">
<datalist id="cities">
    <option value="Birkenhead"></option>
    <option value="Liverpool"></option>
    <option value="Warrington"></option>
    ...
<datalist>

Although the list attribute is copied across to the internal native input this does not work with paper-input.

Expected outcome

The datalist should appear as autocomplete options for the paper-input.

Actual outcome

The datalist does not appear as autocomplete options for the paper-input.

Steps to reproduce

1. Init Polymer with proper shadow DOM:

    window.Polymer = { dom: 'shadow' };
   

2. Put a paper-input element in the page.

3. Add a datalist with an id property

4. Add a list property to the paper-input

5. It doesn't work.

It does work with the shady DOM polyfill, and can be hacked in the dev tools by moving the datalist into the same shadow root as the input.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10