search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.44k stars 2.13k forks source link

Auth component autocomplete behavior is broken in Chrome #7378

Closed sdsanders closed 3 years ago

sdsanders commented 3 years ago

Describe the bug Hovering into the list of autocomplete suggestions in an auth component field (like username within the Sign In component) and then out of it will make it look like the field has been filled, but the text in the field is not actually editable.

To Reproduce Steps to reproduce the behavior:

  1. Go to any of the Amplify auhenticator docs pages, for example https://docs.amplify.aws/ui/auth/authenticator/q/framework/angular
  2. Click in the username field of the displayed Sign In component
  3. You will probably see autocomplete suggestions - hover into the list of suggestions then hover out of it
  4. The field will appear filled, but the text will not actually be editable. If you begin typing it will remove the autofilled text

Expected behavior Similar text fields in other web pages will remove the autofilled text from the field when you hover out of the list.

Code Snippet This can be recreated within the hosted Amplify docs

Screenshots Amplify behavior: amplify

Expected behavior (identical username field in a Codepen) amplify2

Additional context I am using Chrome 86 on Windows 10.

amhinson commented 3 years ago

Thanks for the details @sdsanders! 🙏

This does appear to be related to our usage of shadow DOM with StencilJS (and Web Components in general). Here is an open issue that also shows the behavior you are seeing: https://github.com/WICG/webcomponents/issues/894

With that said, I'm not sure if there's much we can do at this point, as the underlying issue is out of our control. I'm going to close this issue for now, but we will keep an eye on this so that we can hopefully improve this experience in the future once this gets resolved with Web Components.

sdsanders commented 3 years ago

Thank you for the quick response @amhinson!

Since this is an upstream issue, it would be nice to have the option to disable autocomplete until it is fixed. #5048

github-actions[bot] commented 2 years ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.