Log in - Validation messages are hidden behind keyboard

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. In the log in screen enter an account that has 2FA enabled
2. Enter the correct password in the password field
3. Enter a incorrect 2FA code in the code field

Expected Result:

The message about incorrect data entry should be clearly visible

Actual Result:

Message hidden under keyboard when I entered a wrong password

Workaround:

Unknown

Platform:

Where is this issue occurring?

Web
iOS ✔️
Android
Desktop App
Mobile Web

Version Number: 1.0.78-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation
Device: Apple iPhone XS Max - iOS 14.0.1

Bug5152879_keyboard.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

view this job on upwork

[MelvinBot]

Triggered auto assignment to @pecanoro (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

Triggered auto assignment to @jboniface (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[rdjuric]

Proposal

We can add a Keyboard.dismiss() to our validateAndSubmitForm that is called after we tap the Sign In button, this way we show the full page again and there's space for any errors.

[MelvinBot]

Triggered auto assignment to @Julesssss (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[nikul6]

Proposal:

We need to hide the keyboard when click on Sign In button.

[Major-Usama]

Proposal :
We can use KeyboardAwareScrollView on the whole view and then we can do Keyboard. dismiss on Sign In the button click

[masoudsm31]

Proposal:
I suggest to put the whole screen under react-native-keyboard-aware-scroll-view.
Or we can use KeyboardAvoidingView too.

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view
https://reactnative.dev/docs/keyboardavoidingview

[Julesssss]

I think we should move the error message so that it sits beneath the input that failed.

We can add a Keyboard.dismiss()

And also do this.

[Julesssss]

I suggest to put the whole screen under react-native-keyboard-aware-scroll-view.

The content already scrolls in this case.

[parasharrajat]

There are two things that should be done here.

1. Move the error message under the input fields.
2. use our custom KeyboardAvoidingView to show the button over the keyboard.

[rdjuric]

I think we should move the error message so that it sits beneath the input that failed.

I think there was a thread on Slack about this. The error message also shows up below the button in the previous screen if the e-mail is invalid.

[UHaider]

Proposal

We should not dismiss the keyboard so that user can type in again the correct one. We can do the following

1. We should use scrollToEnd() on existing ScrollView when there is error.

[parasharrajat]

@rdjuric here it is https://expensify.slack.com/archives/C01GTK53T8Q/p1626257908229200

[rdjuric]

Thanks @parasharrajat! That's it.

So yea, I think we should change this across the login flow as it happens in other pages as well.

[dotfelixb]

For scenarios like showing a message in this case, a popup or toast is most appropriate, it captures the user's attention far better than the current implementation

[isagoico]

Issue reproducible during KI retests.

[Julesssss]

For scenarios like showing a message in this case, a popup or toast is most appropriate, it captures the user's attention far better than the current implementation

I'm not sure I agree that a toast is a better solution than a well-placed text label.

[Julesssss]

As @rdjuric mentioned, this also occurs on the email/phone login step. I think it makes sense to solve these issues too, so here are the updated requirements:

• The message about incorrect data entry should be moved above the form submit button, so that it is always visible to the user
• Use KeyboardAvoidingView
• If the user clicks 'Forgot Password', the validation error message should be hidden

Ideally we should display the label beneath the relevant input for each case, but this requires wider changes so let's just fix the stated issue for now

[rdjuric]

@Julesssss So something like

1. Wrap our Login steps in a KeyboardAvoidingView
2. Move our Text for state.formError to stay above our submit Button
3. Set the state.formError to false if the user taps on forgot password

[Julesssss]

Thanks for the proposals and suggestions.

@parasharrajat and @rdjuric, you both helped to refine and suggest good solutions. I'll accept @rdjuric's proposal this time, as you have been assigned fewer issues than Rajat recently, and both proposals are similar.

[parasharrajat]

@Julesssss I never meant to propose a solution for this. Otherwise it would have been stated as PROPOSAL. I just thought of giving it a right direction bcz I saw many proposal trying to take it into different directions.

[Julesssss]

Ah, no worries. Thanks for the help anyway.

[jboniface]

invite sent to @rdjuric

[rdjuric]

Sent a proposal on Upwork @jboniface

[isagoico]

Issue reproducible during KI retests

[isagoico]

Issue not reproducible during KI retests (Fixed 🎉)

[Julesssss]

PR was merged and deployed to prod, not sure why it remained open 😕