Autocomplete don't work with payment form/inputs

[Oupsla]

Description

When trying to make a checkout form, paper-inputs don't autocomplete with payment information stored in browser.

Expected outcome

Like simple inputs, paper-input autocomplete with credit card information stored in browser

Actual outcome

Paper-inputs don't autofill with credit card information stored in browser

Live Demo

JsBin is not in https so autocomplete will only trigger a grey box. But this grey box appears with simple inputs to warn the user (of the no-secure connexion) but not with paper-inputs.

http://jsbin.com/vatiqohodi/edit?html,output

Steps to reproduce

Add a credit card in browser settings. For example : Name - 4242424242424242 - 10/22 - 123 Create a form with 4 paper-inputs (with the minimum to be autocompleted)

<form>
    <paper-input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name"></paper-input>
    <paper-input name="cardnumber" id="frmCCNum" required autocomplete="cc-number"></paper-input>
    <paper-input name="cvc" id="frmCCCVC" required autocomplete="cc-csc"></paper-input>
    <paper-input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp"></paper-input>
</form>

Browsers Affected

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

Not tested with others

[notwaldorf]

Unfortunately autofill doesn't work in the shadow DOM, so this isn't something we can fix. Here is a Chrome bug (https://bugs.chromium.org/p/chromium/issues/detail?id=746593.), and I'm sure there's a similar Safari bug as well, since it's broken there too.

[vlukashov]

The WebKit issue is https://bugs.webkit.org/show_bug.cgi?id=172567

[notwaldorf]

Thanks!

[grvsooryen]

Currently I made autofill work on safari on iPhone using following code on index.html

  <script>
   // Force all polyfills on
    if (window.customElements) window.customElements.forcePolyfill = true;
    ShadyDOM = { force: true };
  </script>
  <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

[notwaldorf]

Ok, some updates. I did a demo of all the possible combinations of inputs and forms and shadow roots and it seems that autofill works if the native <input> is directly under a <form> or under the document. For users of paper-input this means:

• paper-input will not work with autofill
• you can use paper-input-container, which is a decorator for an <input>, and use that inside a form; this will look like a paper-input and will get autofilled.

[heruan]

Any update on this? I looked at the Chrome bug but I couldn't understand why is still unfixed. This is quite a blocker on the adoption of web components as it backlashes to user rage 👊💢

[romanzhivo]

Currently I made autofill work on safari on iPhone using following code on index.html

  <script>
   // Force all polyfills on
    if (window.customElements) window.customElements.forcePolyfill = true;
    ShadyDOM = { force: true };
  </script>
  <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>

Thank you very much!