Browser don't autocomplete credentials

[RoXuS]

Since the upgrade to Polymer 2, the form no longer autocomplete credentials from the browser (chrome, safari, firefox). The browser seems to don't detect the form (shadow-dom ??).

I don't know if it is an issue or a normal case ?

Example of my usage:

        <iron-form with-credentials allow-redirect>

          <form method="POST" action="[[url]]">

            <paper-input label="Username" id="username" name="username" label="username" value="{{_username}}" autocomplete="email"></paper-input>

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

            <input type="hidden" id="csrf_token" name$="[[csrfParameterName]]" value="[[csrfToken]]"/>

            <div class="alert">
              <slot name="error">
              </slot>
            </div>

            <paper-button class="submit" raised on-tap="_submitForm">
              <button>Login</button>
            </paper-button>

          </form>

        </iron-form>

  _submitForm() {
    this.shadowRoot.querySelector('iron-form').submit();
  }

We use 2.0-preview branch.

[notwaldorf]

Yeah, I think we've done testing on Safari and autocomplete doesn't work with the shadow DOM (the problem is that the input is hidden in the paper-input's shadow root, and it can't fill in the value). The form is detected fine, but the nested input inside the paper-input is probably the problem. The reason why this suddenly started happening is that Polymer 2 has Shadow DOM turned on by default.

To test that's the problem, try turning off Shadow DOM (if you're using Polyserve, try wc-shadydom=true&wc-ce=true as an argument) and see if that works.

Unfortunately, if that's the underlying problem, there's nothing we can do here -- it's a browser bug

[RoXuS]

Hi @notwaldorf !

I can not use Polyserve because of some proxies that I have to have on my app.

I put:

<script>window.ShadyDOM = { force: true };</script>

In my index.html, the ShadyDOM is forced BUT I still have the issue ! (Whereas with Polymer 1 all was good, I don't know why :( ).

Thx for your response.

[vlukashov]

@notwaldorf can you please point to an open issue about supporting HTML forms across Shadow DOM boundaries for Chrome and / or Safari? [these are the only two browsers that currently have native support for Shadow DOM]

Recently I've hit this same issue (in Chrome) and spent some time investigating and comparing browsers. It appears that at this point HTML forms are broken when form elements are scattered across several Shadow DOM boundaries.

I would be happy to pass the investigation results to the people who could actually make HTML forms work again--be it the Polymer Elements team of the browser dev teams.

This can be seen either as a browser issue, or a Polymer Elements' issue. It depends on how you would like to look at things:

• is it an issue with browsers that natively implement Shadow DOM and do not look for HTML form elements across the Shadow DOM boundaries?
• or is it an issue with Polymer Elements (paper-input, iron-form, iron-input, etc) that hide the native HTML form elements into Shadow DOM so that browsers cannot find them?

[grvpanchal]

@notwaldorf @tkochi Is there a way to make autofill work on safari on iPhone devices? Thanks

[notwaldorf]

This recently came up on paper-input, so here's what I answered there: PolymerElements/paper-input#554.
@vlukashov: The Chrome bug is https://bugs.chromium.org/p/chromium/issues/detail?id=746593

[vlukashov]

@notwaldorf: the same issue for WebKit is https://bugs.webkit.org/show_bug.cgi?id=172567
(it was me who reported it to chrome)

[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>

[chwzr]

any updates on this?

[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!