Form autofill is broken when form elements are encapsulated within a Shadow DOM
Reported by
vik...@vaadin.com,
Jul 19 2017
|
|||||||||||||||||
Issue descriptionUserAgent: 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
,
Jul 21 2017
,
Jul 26 2017
,
Jul 31 2017
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...
,
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
,
Aug 5 2017
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
,
Aug 8 2017
cc-ing some OWNERs of chrome/renderer/autofill/OWNERS.
,
Aug 9 2017
,
Aug 10 2017
I'm OOO until October. Adding the passwords component because this seems to also affect passwords autofill.
,
Aug 17 2017
Bumping this to P1 because this is even broken for manual fallbacks of the password manager see https://vlukashov.github.io/polymer-forms/
,
Aug 17 2017
,
Aug 17 2017
,
Sep 1 2017
Can Autofill folks work on this?
,
Sep 8 2017
Investigating
,
Oct 4 2017
,
Nov 2 2017
Issue 780422 has been merged into this issue.
,
Nov 21 2017
+Keishi, I am wondering if you could possibly help with this issue?
,
Nov 21 2017
,
Nov 22 2017
+vasilii
,
Feb 1 2018
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.
,
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
,
Mar 2 2018
,
Apr 2 2018
FYI translate has similar problem regarding shadow DOM : issue 827339
,
Sep 21
|
|||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||
Comment 1 by tkent@chromium.org
, Jul 19 2017