paper-input does not work with a datalist in shadow DOM

[KeithHenry]

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

• [x] Chrome
• [ ] Firefox
• [ ] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[KeithHenry]

Looking at fixes for this: the <input> and <datalist> must be in the same shadow root.

So, either:

• Find a way for the <datalist> to be generated by the paper-input in its shadow root.
• Find a way for <input> to be in the light DOM for to control.

[notwaldorf]

Yup, that's right. The native input element doesn't know how to traverse shadow roots, so it must be in the same root as the datalist. I'd recommend using a <paper-input-container> and wrapping an iron-input that way, if you need to

[KeithHenry]

Cheers for the response @notwaldorf. Yes, that's my current workaround, and the new <simple-input> element pattern for Polymer 3 doesn't have this problem.

What should we do with this element?

• Remove the list property added in https://github.com/PolymerElements/paper-input/pull/86 as it doesn't consistently work.
• Update the documentation so that it's clear that list only works with shady DOM.
• Copy the referenced <datalist> into the shadow root on attach?
• Update list to support an array of values that gets added as a <datalist>.
• Something else?

[notwaldorf]

I think....in paper-input we can observe the datalist attribute/property, and when it changes, create a datalist in the shadow dom, next to the input, and link them there. wdyt?

[notwaldorf]

(i think the difference is copying it on datalist changing, vs on attach, but as a low barrier of entry tbh, attach would work too)

Would you be interested in sending a PR for this? I can help anywhere you're stuck

[KeithHenry]

Cheers @notwaldorf, I'll have a go at it when I have a little time.

What should I do with the current list: String property? I'd remove it and just set the <input list$=... when there is a datalist: Array populated, but that may break things for users relying on the shady DOM shim behavior (that currently works). I can also leave it in, and just use it for the id of the generated <datalist>, but then this bug persists for any users that don't set the new property.

[KeithHenry]

@notwaldorf That PR seemed simple enough, but has 6 failing Travis tests due to focus/blur events and aria-* attributes that <datalist> doesn't support. I'm not quite sure what to do to fix those.