[PAY 8/20] Can add letters while entering input for Phone Number on Web (Profile)

[aman-atg]

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. Login to e.cash
2. Go to Profile
3. Click on Add Phone Number
4. Write english letters and it'll not stop you

Expected Result:

Just like in Android , Mobile web (and maybe iOS?) , it should not let users enter any invalid characters into the Phone Number field.

Android

Actual Result:

It's letting users type anything

Workaround:

Remove invalid characters manually to proceed

Platform:

Where is this issue occurring?

• [ ✔️ ] Web
• [ ❓ ] Desktop App
• [ ❌ ] iOS
• [ ❌ ] Android
• [ ❌ ] Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[aman-atg]

Proposal

• We should apply conditional checking like this so that user can't enter invalid characters when the input is of type phone

    onSecondaryLoginChange(login) {
        if (this.formType === CONST.LOGIN_TYPE.EMAIL) {
            this.setState({login});
        } else if (
            this.formType === CONST.LOGIN_TYPE.PHONE && (/^(\+)(\d)*/.test(login) || login === '')) {
            this.setState({login});
        }
    }

• The function will be used here on this line
  

  App/src/pages/settings/AddSecondaryLoginPage.js

  Line 138 in c009187

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

  
  onChangeText={this.onSecondaryLoginChange}

• Additional suggestion

  • Since, the secondary input can also be an email.. a proper name for phoneNumberInputRef should be secondaryLoginInputRef
  • So, all the references of phoneNumberrInputRef should be changed into secondaryLoginInputRef

[laurenreidexpensify]

Nice catch @aman-atg. Am moving this issue through our triaging process now.

[MelvinBot]

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

[parasharrajat]

If we do this here, we have update all of our phone inputs to have the same behaviour.

[MelvinBot]

@Gonals Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@Gonals Still overdue 6 days?! Let's take care of this!