New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 746593 link

Starred by 20 users

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 1
Type: Bug

Blocking:
issue 712010
issue 806868



Sign in to add a comment

Form autofill is broken when form elements are encapsulated within a Shadow DOM

Reported by vik...@vaadin.com, Jul 19 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:54.0) Gecko/20100101 Firefox/54.0

Steps to reproduce the problem:
1. Create an HTML <form> with a <paper-input> and a <button type="submit">
2. Add an autocompletion attribute to the paper-input
3. Submit the form
4. Open the same page (with the form) again and see the autocompletion for the paper-input does not work

See a more detailed explanation and a live demo here: https://github.com/vlukashov/polymer-forms

It seems that the issue is that the browser does not look for HTML form elements across the Shadow DOM boundaries even though the spec for forms autofill says it should (https://html.spec.whatwg.org/multipage/form-control-infrastructure.html):

> A user agent prefilling a form control must not discriminate between form controls that are in a document tree and those that are connected; that is, it is not conforming to make the decision on whether or not to autofill based on whether the element's root is a shadow root versus a Document.

What is the expected behavior?
Form autofill should work regardless of whether or not form elements are in a main document or in a shadow DOM.

What went wrong?
HTML form autocompletion attributes do not work if the form and its elements are scattered across several Light / Shadow DOMs (e.g. a native form with paper-inputs).

Did this work before? No 

Does this work in other browsers? No
 The same issue is can be reproduced in Safari 10.1 that also has a native Shadow DOM implementation.

Chrome version: 59.0.3071.115 (Official Build) (64-bit)  Channel: n/a
OS Version: OS X 10.12
Flash Version: Shockwave Flash 26.0 r0
 
polymer-forms-master.zip
61.8 KB Download

Comment 1 by tkent@chromium.org, Jul 19 2017

Components: -Blink>Forms UI>Browser>Autofill

Comment 2 by tapted@chromium.org, Jul 21 2017

Cc: zkoch@chromium.org
Labels: Needs-Milestone
Cc: kkaluri@chromium.org
Labels: Needs-Feedback
Tested this issue on Mac 10.12.6 with chrome #60.0.3112.78,

Steps followed:
1. Downloaded provided zip
2. Navigated to index.htnl
3. Logged in with dummy credentials

Observations:
1. While submitting the credentials, chrome didn't ask for to save passwords.
2. While again logging into index.html, it didn't show the auto-suggestions for the username and password.

Attaching the screen-cast for reference.

viktor@ Could you please look into it and confirm that this issue you are facing? 

Thank You...

746593.mp4
873 KB View Download

Comment 5 by vik...@vaadin.com, Aug 5 2017

The recorded video _does not_ accurately show the issue. In order to see the issue this ticket is addressing please follow the steps:

1. download the attached archive polymer-forms-master.zip
2. unpack the archive into a folder named 'polymer-forms-master'
3. execute `npm install` in the polymer-forms-master folder
4. execute `npm start` in the polymer-forms-master folder
5. navigate to http://127.0.0.1:8000/#custom-in-shadow
--- OR (instead of the steps 1-5) ---
5. navigate to https://vlukashov.github.io/polymer-forms/#custom-in-shadow

6. fill-in the user name and password
7. click the 'Submit' button
8. see that the autofill did not work

The videos are already recorded and are available to download from https://github.com/vlukashov/polymer-forms/tree/master/videos. I'm now attaching two of them to ticket ticket:

How autofill is supposed to work (native form elements in the light DOM): chrome-native-in-light.mp4
How autofill actually does not work (custom elements in the shadow DOM): chrome-custom-in-shadow.mp4
chrome-native-in-light.mp4
3.1 MB View Download
chrome-custom-in-shadow.mp4
3.0 MB View Download
Project Member

Comment 6 by sheriffbot@chromium.org, Aug 5 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "kkaluri@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Cc: -zkoch@chromium.org -kkaluri@chromium.org ma...@chromium.org rogerm@chromium.org est...@chromium.org
Status: Available (was: Unconfirmed)
cc-ing some OWNERs of chrome/renderer/autofill/OWNERS.
Cc: vabr@chromium.org

Comment 9 by vabr@chromium.org, Aug 10 2017

Cc: -vabr@chromium.org
Components: UI>Browser>Passwords
Labels: Hotlist-Polish
I'm OOO until October. Adding the passwords component because this seems to also affect passwords autofill.
Cc: kolos@chromium.org dvadym@chromium.org
Labels: -Pri-2 M-63 Pri-1
Bumping this to P1 because this is even broken for manual fallbacks of the password manager see https://vlukashov.github.io/polymer-forms/
Blocking: 712010
Components: Blink>DOM>ShadowDOM
Components: -Blink>DOM>ShadowDOM
Can Autofill folks work on this?
Investigating
Cc: krajshree@chromium.org battre@chromium.org
 Issue 768573  has been merged into this issue.
 Issue 780422  has been merged into this issue.

Comment 17 by ma...@chromium.org, Nov 21 2017

Cc: -est...@chromium.org -rogerm@chromium.org keishi@chromium.org
+Keishi, I am wondering if you could possibly help with this issue?

Comment 18 by ma...@chromium.org, Nov 21 2017

Cc: rogerm@chromium.org
Cc: vasi...@chromium.org
+vasilii
I have this issue in my Polymer (v1) app.

I have been working on a work-around, but it doesn't completely replicate the issues I have in my (closed) app. It essentially adds event handlers to mirror the elements' values between the input elements inside Polymer elements (ie behind shadow roots) and input elements in the top level dom.

https://github.com/davidmaxwaterman/paper-input-password-manager

Using this technique in my actual app, if I save one set of credentials and then try to use a different set of credentials it seems to use the password for the first username.
It is also seems extraordinarily difficult to actually remove credentials from chrome's password manager. It seems almost never to forget. Perhaps this is something to do with the behaviour of the paper-input-container iron-input elements.
Project Member

Comment 21 by bugdroid1@chromium.org, Mar 2 2018

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/3fac6f366e575b9b60349af6b402fc140a44280d

commit 3fac6f366e575b9b60349af6b402fc140a44280d
Author: Kent Tamura <tkent@chromium.org>
Date: Fri Mar 02 10:39:46 2018

Add IsAutonomousCustomElement() and ShadowRoot() to blink::WebElement.

They are helpful for Autofill to traverse shadow trees of custom
elements.  This CL has no behavior changes because new functions are not
used yet.

Bug: 746593
Change-Id: I42249a47d122766bb7113c932e20c9cccacf5909
Reviewed-on: https://chromium-review.googlesource.com/945550
Reviewed-by: Takayoshi Kochi <kochi@chromium.org>
Commit-Queue: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#540488}
[modify] https://crrev.com/3fac6f366e575b9b60349af6b402fc140a44280d/third_party/WebKit/Source/core/exported/WebElement.cpp
[modify] https://crrev.com/3fac6f366e575b9b60349af6b402fc140a44280d/third_party/WebKit/Source/core/exported/WebElementTest.cpp
[modify] https://crrev.com/3fac6f366e575b9b60349af6b402fc140a44280d/third_party/WebKit/public/web/WebElement.h

Owner: se...@chromium.org
Status: Assigned (was: Available)
FYI translate has similar problem regarding shadow DOM : issue 827339
Blocking: 806868

Sign in to add a comment