calcite-input: input loses focus on every keypress when login info saved (safari)

[gpbmike]

Actual Behavior

Using Safari, If you use calcite-input in login form and choose to save email/password, when you return the inputs will lose focus on every keypress.

https://user-images.githubusercontent.com/8754/181073838-52e50e9a-0b9f-4a98-bae3-8115ba5372ec.mov

Expected Behavior

User should be able to freely type email and password without having to re-focus on the field.

Reproduction Sample

https://mikehorn.dev/calcite-input-saved-login/

https://github.com/gpbmike/calcite-input-saved-login (code)

Reproduction Steps

1. Use Safari.
2. Enter any email/password.
3. Save login info to browser.
4. Return to form.
5. Try to type email and password.
6. Every keypress causes input to blur.

Reproduction Version

beta.86

Relevant Info

No response

Regression?

No response

[github-actions[bot]]

It looks like this issue is missing some information:

• A codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible.

Issues without reproduction samples may not be prioritized. If you were unable to create a sample, please try to answer any questions that arise once development begins. Thanks for your understanding.

[driskull]

This one is tricky. Safari is trying to apply the saved form info to the hidden input elements instead of the inputs in the shadowRoot.

So the positioning of the autofill is all incorrect and causing the component to become unfocused.

We could just disable autoFill for these hidden inputs?

[benelan]

I guess we could do that, but it would be sad to completely disable autofill for inputs just because of Safari. It works in Chrome and Firefox. IIRC @eriklharper you looked into this right, do you remember what you found?

I remember I suggested making the hidden inputs inert, but it wasn't supported in the latest two Safari versions at the time. Not sure if that worked or not though, I don't have a Mac.

[driskull]

I'll try some more options 👍

[eriklharper]

Yeah, the inert method was the only way I was able to get a "fix" in for this: https://github.com/Esri/calcite-components/pull/5221/files The other workaround is create a scoped input component, but that seems like a lot just to accommodate autofill on Safari.

[driskull]

inert doesn't do the autofill in safari either. If I set inert on the input it no longer gets autofilled.

The problem is that safari focuses on the hidden input on autofill which means the component's input loses focus and it gets into that kind of a loop.

[geospatialem]

Reallocating to February's priorities for the team to explore further.

[anveshmekala]

This bug is fixed with PR #5221. Tested in Safari 16.4 Version.

[jcfranco]

The PR above depends on HTMLElement.inert, which we would be able to use once we bump our minimum supported version to Safari 16. We expect this to happen later in the year, so I'll adjust the milestone accordingly.

[anveshmekala]

When inert is added similar to PR #5221 , the native HTML5 error messages are not showing up in safari /chrome or edge.

[jcfranco]

@eriklharper ☝️ this throws a wrench in the current solution. 🔧💨✋

[eriklharper]

Did some spike work on this, and I created a branch to track the work I did. Based on that work I'd say that when we get to adding ElementInternals support to calcite-input, this should resolve the autofill issues with Safari (and potentially other browsers too). That branch requires creating a local ssl certificate named calcite.dev (I used mkcert as outlined in the instructions here. Thanks @gpbmike for that link! ;)) and also requires updating your HOSTS file to point calcite.dev to localhost. This is to get autofill to work.

[geospatialem]

Reallocated to November to determine if the element internals resolve the above via #8126.