Log in - Error message doesn't disappear when editing the email or phone number

[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. Go to staging.expensify.cash
2. Enter invalid email format or phone number
3. Verify the error message appears
4. Delete the text inside the field and start writing something else

Expected Result

Error message should also disappear

Actual Result

Error message still appears

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.0

Reproducible in staging?: yes
Reproducible in production?: yes

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

Notes/Photos/Videos: Any additional supporting documentation

Bug5245685_Recording__1053.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause
Slack conversation:

View all open jobs on GitHub

[MelvinBot]

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

[Hanaffi]

Propsal

We can check if the input is empty string, Just reset the errors to empty again.

Two possible ways:

1. Add condition to the onChangeText function

   App/src/pages/signin/LoginForm.js

   Line 86 in fc37f6d

   onChangeText={text => this.setState({login: text})}

2. Add a componentDidUpdate method and do the job.

[PrashantMangukiya]

If issue considered as External, this will be solution:

We have to update code within /src/pages/signin/LoginForm.js as under:

constructor(props) { 
  ...
    this.onChangePhoneOrEmail = this.onChangePhoneOrEmail.bind(this);    // *** Add this line ***
  ...
}

// *** Add this function  ***
onChangePhoneOrEmail(text) {
    this.setState(prevState => (
        {
            login: text,
            formError: !_.isEmpty(text) && prevState.formError,
        }
    ));
}

<ExpensiTextInput
    ...
    //onChangeText={text => this.setState({login: text})}        //  *** This is old code  ***
    onChangeText={this.onChangePhoneOrEmail}                  // *** This is new code ***
   ....
/>

Below is screen record, that shows how It works after update:

Web

Screen.Recording.Web.mov

Desktop

Screen.Recording.Desktop.mov

Mobile Web

Screen.Recording.Mobile.Web.mov

iOS

Screen.Recording.iOS.mov

Android

Screen.Recording.Android.mov

[mananjadhav]

@isagoico I had read this slack thread here where we were removing the onBlur unless the button was clicked. Do we still want to consider this issue a bug?