aws-amplify/amplify-js

Focus loss on username/password in expo web

Closed this issue · 11 comments

hew commented

Describe the bug
Focus loss on username/password fields using expo web.

To Reproduce
Steps to reproduce the behavior:

  1. initialize fresh expo project
  2. npm i aws-amplify-react-native
  3. Try to use the SignIn component:
<Authenticator
  amplifyConfig={myAWSExports}
>
  <SignIn>
</Authenticator>
  1. expo start --web

At this point, you should be able to attempt some input in the browser. Immediately, the fields will lose focus, preventing you from entering any text.

Expected behavior
The expected behaviour is that the input fields should NOT lose focus.

hew commented

Note: this only happens with the <SignIn /> component. Not any of the others.

davidbiller commented

For web, use the aws-amplify-react component.
you can add a postfix to the js files like:
login.js
login.web.js

ericclemmons commented

This sounds similar to #3827. @hew Did @davidbiller's suggestion work, with using aws-amplify-react via login.web.js? 🤞

In the meantime, I'll need to setup a project and reproduce it...

ericclemmons commented

I was able to reproduce it here:

https://github.com/ericclemmons/amplify-js-issues-4483

Using a vanilla <TextInput /> works fine, so there's something going on here that's causing the focus to be lost.

Going to mark this as a bug & get some 👀 on this...

ericclemmons commented

Reproduced with the react-native CLI as well:

react-native focus
ericclemmons commented

Aha! So the problem is with using <Authenticator> instead of withAuthenticator(App).

There isn't React Native support for <Authenticator> (or its sub-components), only the Higher-order Component (HoC):

https://aws-amplify.github.io/docs/js/react#add-auth

(Or, based on your usage, Authenticator and SignIn are broken)

@hew Try converting your code to use withAuthenticator(App) and let us know if that resolves it for you.

I'm looping in a few others on the team for extra 👀 on this.

hew commented

@ericclemmons Thanks for the response! 😀

I ended up going with a custom approach using the .signIn method directly. So I don't have any immediate need, here. Thanks again.

ericclemmons commented

@hew Glad to hear you're unblocked 😅 Going to keep this open so that we can at least get this addressed in the future with #3279.

GeorgeBellTMH commented

So switching the View to a ScrollView in SignIn.js resolves the issue...

<Header theme={theme}>{I18n.get('Sign in to your account')}</Header> <View style={theme.sectionBody}>

<Header theme={theme}>{I18n.get('Sign in to your account')}</Header> <ScrollView style={theme.sectionBody}>

amhinson commented

Just merged a fix for this, and it should be in the next release. I'm going to go ahead and close this issue for now, but feel free to open a new issue if the issue persists 👍

github-actions commented

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.