Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 of 8 tasks
KeithHenry opened this issue Nov 27, 2017 · 7 comments · May be fixed by #599
Open
1 of 8 tasks

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

KeithHenry opened this issue Nov 27, 2017 · 7 comments · May be fixed by #599

Comments

@KeithHenry
Copy link

KeithHenry commented Nov 27, 2017 •
edited

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
@KeithHenry KeithHenry mentioned this issue Nov 27, 2017
Merged
@KeithHenry
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

KeithHenry commented Nov 29, 2017 •
edited

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 Added support for HTML5 datalists #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
Copy link
Contributor

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
Copy link
Contributor

(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
Copy link
Author

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 KeithHenry linked a pull request Dec 7, 2017 that will close this issue
Open
@KeithHenry
Copy link
Author

@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.

@radium-v radium-v mentioned this issue Dec 28, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Enable creation of datalist element inside same shadow root as input KeithHenry/paper-input
2 participants
@notwaldorf @KeithHenry