Bug 172567 – Safari autofill doesn't work in form inputs that are in a shadow root

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Taylor Savage]

Autofill for form input fields such as credit card fields, email addresses, etc. doesn't appear to work for form inputs that are inside shadow roots.

Reproduction:

1) Go to polymer-shop2.appspot.com
2) Tap on "men's outerwear"
3) Tap on "Men's tech shell full-zip"
4) Tap on "Add to cart"
5) Tap on the cart icon on the upper right
6) Tap on "Checkout"
7) Tap in the "Email" field

Expected:
The autofill selector should appear to enable you to autofill from a contact.

Result:
No autofill appears supported.

This is also the case for other fields I'd expect to autofill, like "Card Number"

[Radar WebKit Bug Importer]

<rdar://problem/32394943>

[Samuel Sheldon]

I have tried this in iOS 15.1 and this issue is still not fixed. 

This is a critical feature for many developers, is there any way to get an estimate on a fix? Or at the very lease a temporary work around or solution we can use in the mean time?

Any update or assistance you can give will be helpful, thanks!

[Samuel Sheldon]

Any update on this issue?

Same issue, when is it expected to be fixed!? 

it's 5th year already

[Daniel Ehrhardt]

Safari is the new Internet Explorer.

[Liam DeBeasi]

Created attachment 460859 [details]
Code reproduction

I am attaching a new code reproduction as the link in the initial post is broken. Is there anything else we can do to help get this issue resolved?

Steps to reproduce:

1. Open reproduction on an iOS device.
2. Tap into any of the inputs in the "Native" section. Observe that the autofill/passwords button appears above the keyboard.
3. Tap into any of the inputs in the "Web Component + Shadow DOM" section. Observe that the autofill/passwords button does not appear above the keyboard.
4. Tap into any of the inputs in the "Web Component + Light DOM" section. Observe that the autofill/passwords button appears above the keyboard.

Expected Behavior:

I expect that the autofill button will appear regardless of the Shadow DOM.

Actual Behavior:

The autofill button only appears on inputs in the light DOM.

[Aidar]

Please fix this bug🙏

Any update on the progress of this? Autofill is supported by other browser makers. 

Looks like there is some progress in Chromium: https://chromestatus.com/feature/5769419581030400

Does webkit have any plans to support? Seems like a pretty important feature.

[Ricky Mondello]

Fixing this actually requires a Safari change, not a WebKit change. I will report back to this bug when a fix for this is testable in Safari Technology Preview.

[Martin]

Would love to see support for this.

We've had great feedback from clients moving away from remotely hosted iframes and re-implementing in client-hosted Shadow DOMs, but cannot recommend Safari on Mac over Chrome as a result of lacking autofill support.

On iOS, Safari performs better than the Chrome WebKit wrapper. Unlike Chrome, Safari can tab input fields and toggle the virtual keyboard. Unfortunately neither browser does autofill.

[Ryosuke Niwa]

It would be really helpful for people commenting here to post URLs of websites that this bug affects.

[Ricky Mondello]

Hi folks!

This is resolved in Safari Technology Preview 162. At least, I made a code change in Safari that I *believe* resolves it. (I used the reproduction attached by Liam DeBeasi to test.)

Can all of y’all who care about this issue give your web content a spin with Safari Technology Preview 162 and report back about whether the AutoFill issue is resolved or not? I’d really appreciate that, and I also appreciate your patience.

[Martin]

Confirmed working in Safari Technology Preview Release 162 (Safari 16.4, WebKit 18615.1.18.2) on MacOS Ventura. 

Is there a way to test this on iOS?

Thank you, Ricky!!

[Ricky Mondello]

> Is there a way to test this on iOS?

Not at this time. I’ll try to bump this bug once the fix is testable in an iOS beta.

[Steve]

Ricky,
How long does it usually take for the fix in Safari Technology Preview to show up in Safari?

[Ricky Mondello]

macOS Ventura 13.3, iOS 16.4, and iPadOS 16.4 contain this fix.

[Sunny Patel]

Ricky, thank you so much for this fix!

We noticed when building nested web components each with their own shadowDOM trees, that autofill still doesn't work.  Have you tested for this use case? It occurs quite often if you're building a web components using something like Lit or StencilJS

[Ricky Mondello]

Thanks Sunny!

> We noticed when building nested web components each with their own shadowDOM trees, that autofill still doesn't work.  Have you tested for this use case? It occurs quite often if you're building a web components using something like Lit or StencilJS

I’m very motivated to get this fixed. Do you think you could create some kind of reduced test case, ideally a single HTML file, and attach it to this bug? That way, I’ll have something that represents exactly what you’d like to see work.

[Sunny Patel]

Ricky, 

My apologies looks like it is fixed as well. 

Here's the test is used: https://9tmy5w-3333.csb.app

Worked fine in technology preview version, Release 165 (Safari 16.4, WebKit 18616.1.4.4). 

Thanks!

[Ricky Mondello]

I’m so happy to hear that!

[[e-mail]]

Hello Ricky,

I can open a separate ticket if you prefer, but one-time-code autofill in the shadow DOM still appears to not be fully working after testing on Safari 16.4 and now 16.5.

Here is an example with a minimal shadow DOM component alongside a regular HTML input for comparison: https://playcode.io/1482887

As of iOS 16.4, the code autofill suggestion now appears for the shadow DOM input, but clicking on the suggestion does not populate the element with the code.

[Ricky Mondello]

Hi Maxwell.

You’ll find that this is fixed in the betas of Safari Version 16.6, as well as in Safari Technology Preview.

[Ryosuke Niwa]

*** Bug 257804 has been marked as a duplicate of this bug. ***