calcite-input: Form auto-fill/autocomplete does not work in all browsers

[noahmulfinger]

Actual Behavior

If I have a stored credit card or address in my browser auto-fill settings, the auto-fill option only appears in Chrome (but clearing the auto-fill does not work). The auto-fill option does not appear in Firefox or Safari.

Blocked issues: #8126

Expected Behavior

I would expect auto-fill behavior similar to native form behavior across browsers.

Reproduction Sample

https://codepen.io/noahmulfinger/pen/GROjPgv

Reproduction Steps

1. In whichever browser you are testing in, go to the setting and add a saved address.
2. Go to the codepen and click on the first Street address field. You will see no options to fill in the fields.
3. Click on the Street address field in the native inputs form. You should see an option to fill in the saved address (might require double-click).
4. In Chrome, you should successfully fill in the form, but when you click again and select the Clear option, nothing will happen.

Reproduction Version

@esri/[email protected]

Relevant Info

Regression? Last working version: @esri/[email protected]. I believe this is due to the change to shadow DOM inputs in beta.70.

Source

• CDN
• NPM package

[mpriour]

The autofill property is not passed down to the input element inside the shadow dom.

[y0n4]

There's been several discussions from other devs regarding this issue for autofill managers not properly filling inputs in shadow dom components for a while now. Fortunately there has been a recent mention as of a week ago of an update readying to get launched for this issue in Chrome browsers. However, I haven't spotted any followup discussions on other browsers like firefox/safari.

May have to table this issue to freezer once there is an browser enhancement update

[jcfranco]

Thanks for the breakdown, @y0n4. Going to put this one in the freezer for now. cc @benelan

FWIW, here are some additional browser bug reports on shadow DOM + autocomplete:

https://bugzilla.mozilla.org/show_bug.cgi?id=1629226
https://bugzilla.mozilla.org/show_bug.cgi?id=1644302
https://bugs.webkit.org/show_bug.cgi?id=172567