Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(input): preventing the input from losing focus on keypress in Safari when autofill occurs #5221

Conversation

eriklharper
Copy link
Contributor

Related Issue: #5026

Summary

This is a workaround of a Safari bug that will allow the focus to stay in the input even when Safari's autofill engages on a calcite-input. The drawback to this is that it breaks autofill in Safari only.

It is currently not possible in Safari 15.16.1 to engage autofill behavior properly on an <input> rendered inside a shadowRoot. This change will prevent the hidden input from gaining focus, which is the Safari-only behavior that took the focus away from the visible input. The hope is that this will get resolved in the future on Safari's end, but there is no known timeline for a fix. Safari is planning on fully supporting form-associated custom elements which could potentially address this issue, but won't be for a while until Calcite can migrate over to supporting it until it has been available at least 2 major versions back.

If autofill behavior is required, we could look into creating a version of calcite-input that doesn't use shadow dom so that the input can behave correctly as it does when using a plain <input> inside a form.

@eriklharper eriklharper requested a review from a team as a code owner August 25, 2022 23:55
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Aug 25, 2022
Copy link
Member

@benelan benelan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't use inert until Safari 16 is released (or we could use the polyfill which has performance issues. Regardless, we should figure out an autofill solution that works in all browsers instead preventing it in Safari. I think that means unshadowifying input, unless you find a better alternative

@github-actions
Copy link
Contributor

github-actions bot commented Sep 9, 2022

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Sep 9, 2022
@benelan benelan added the Calcite (dev) Issues logged by Calcite developers. label Jan 30, 2023
@jcfranco
Copy link
Member

We can't use inert until Safari 16 is released

We should be able to start using it later this year when we bump our last 2 Safari major versions to 16 and 17, respectively. I'll update the milestone for this PR and the associated issue accordingly.

@jcfranco jcfranco added this to the 2023 December Priorities milestone May 26, 2023
@github-actions github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label May 27, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jun 3, 2023

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jun 3, 2023
@jcfranco jcfranco removed this from the 2023 December Priorities milestone Nov 14, 2023
…klharper/5026-safari-input-loses-focus-with-autofill
@eriklharper
Copy link
Contributor Author

Closing this due to #5026 (comment) so we will need to revisit the approach to solving the original issue.

@eriklharper eriklharper deleted the eriklharper/5026-safari-input-loses-focus-with-autofill branch February 27, 2024 23:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. Stale Issues or pull requests that have not had recent activity.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants