Focus loss on username/password in expo web

[hew]

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>

4. 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]

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

[davidbiller]

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

[ericclemmons]

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]

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]

Reproduced with the react-native CLI as well:

[ericclemmons]

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]

@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]

@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]

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]

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]

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.