Open KeithHenry opened 6 years ago
Looking at fixes for this: the <input>
and <datalist>
must be in the same shadow root.
So, either:
<datalist>
to be generated by the paper-input
in its shadow root.<input>
to be in the light DOM for to control.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
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?
list
property added in https://github.com/PolymerElements/paper-input/pull/86 as it doesn't consistently work.list
only works with shady DOM.<datalist>
into the shadow root on attach
?list
to support an array of values that gets added as a <datalist>
.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?
(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
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.
@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.
Description
When using the HTML5 platform you can specify a
datalist
to use with aninput
:Although the
list
attribute is copied across to the internal nativeinput
this does not work withpaper-input
.Expected outcome
The
datalist
should appear as autocomplete options for thepaper-input
.Actual outcome
The
datalist
does not appear as autocomplete options for thepaper-input
.Steps to reproduce
Init Polymer with proper shadow DOM:
Put a
paper-input
element in the page.Add a
datalist
with anid
propertyAdd a
list
property to thepaper-input
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