paper-input autocomplete fails to fill

Question

Polymer 1.0 Chrome 50.0.2661.102

I am trying to enable chrome autofill with paper input. When selecting either input the standard appropriate chrome autofill prompt list appears, however selecting an available name, or email from the list does not populate the input, it just closes the chrome autofill list.

   <paper-input
     id="email"
     name="email"
     label="Email"
     type="email"
     autocomplete="email"
   ></paper-input>
   <paper-input
     id="password"
     name="password"
     label="Password"
     type="password"
     autocomplete="current-password"
   ></paper-input>

Answer 1

Try wrapping your inputs in form tags without attributes. Like this:

<form>
  <paper-input
     id="email"
     name="email"
     label="Email"
     type="email"
     autocomplete="email"
   ></paper-input>
   <paper-input
     id="password"
     name="password"
     label="Password"
     type="password"
     autocomplete="current-password"
   ></paper-input>
</form>

Answer 2

To make it work, you need to switch to shady DOM as currently (8-2-2018), browsers do not support Autofill for shadowDOM. Polymer developers have request for this support in following bug trackers:

1. https://bugs.webkit.org/show_bug.cgi?id=172567
2. https://bugs.chromium.org/p/chromium/issues/detail?id=746593
3. https://github.com/PolymerElements/paper-input/issues/554
4. https://github.com/PolymerElements/iron-form/issues/197
5. https://vlukashov.github.io/polymer-forms/#custom-in-shadow

To make it work with shady DOM, Place the following code above webcomponents-loader.js script:

    <script>
        // Force all polyfills on
        if (window.customElements) window.customElements.forcePolyfill = true;
        ShadyDOM = {
            force: true
        };

        function idToChainedClass(poly, _this) {
            if (ShadyDOM) {
                const allElements = poly.dom(_this.root).querySelectorAll('*');
                let id;
                for (var x = 0, len = allElements.length; x < len; x++) {
                    if (allElements[x].id) {
                        id = allElements[x].id;
                        allElements[x].removeAttribute('id');
                        allElements[x].classList.add(id);
                        _this.$[id] = poly.dom(_this.root).querySelector('.' + id);
                    }
                }
            }
        }
    </script>
    <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>

And use the function idToChainedClass in ready() wherever you see error of like this: [DOM] Found x elements with non-unique id #input You can also randomize the ID to make it unique. Follow the technique provided by paper-input: https://github.com/PolymerElements/paper-input/pull/609/files