Personal details - Legal name is not showing error when pasting a name > 150 characters

[kbecciv]

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. Log in with a brand new account
2. Navigate to Settings -> Profile -> Personal details
3. Navigate to the Legal name page
4. Paste a text that has more than 150 characters

Expected Result:

User can see an error below fields if either field has > 150 characters

Actual Result:

No error is shown, only 50 characters are allowed

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• Windows / Chrome
• MacOS / Desktop

Version Number: 1.3.7.2

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):
https://expensify.testrail.io/index.php?/tests/view/3427392

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

Notes/Photos/Videos: Any additional supporting documentation

Bug6034460_legalname.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @johncschuster (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
    - [ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync
    There is no Slack report of this.

[kbecciv]

TR step is Failed https://expensify.testrail.io/index.php?/tests/view/3427392

[dhairyasenjaliya]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Personal details - Legal name is not showing error when pasting a name > 150 characters

What is the root cause of that problem?

• The root cause is we are limiting both the text input (first, last name) by Max character 50 that’s the reason why we cannot add more and also we are not validating the field in real-time to display errors directly to the user

What changes do you think we should make in order to solve the problem?

• Firstly we need to remove maxLength from both the legalFirstName and legalFirstName text input inside LegalNamePage.js

• Then we need to create a new regex pattern inside ValidationUtils.js to identify the character length and set limit to 150 or 50 (or any desired limit) example of pattern: /^.{1,50}$/ we can define this pattern later at PR stage this pattern is just an example

• Then we need to call that function while validating the form inputs which is found here function LegalNamePage(props) -> LegalNamePage.js

• Below is an example to add validation need to apply on both legalFirstName and legalFirstName

• We are already validating if the field is empty and also we are checking if it contains a special character or not

        if (!ValidationUtils.isValidLegalName(values.legalFirstName)) {
            errors.legalFirstName = translate('privatePersonalDetails.error.hasInvalidCharacter');
        } else if (_.isEmpty(values.legalFirstName)) {
            errors.legalFirstName = translate('common.error.fieldRequired');
 +      } else if(!ValidationUtils.isValidLegalNameLength(values.legalFirstName)){
 +           errors.legalFirstName = "Max length is 150 character " <- Message need to define 
        }


Note : I’m not sure if total length is combination of both legalFirstName and legalFirstName or each field has its own max character this but we can adjust regex pattern based on this factor

Additionally : We can apply the same regex to limit the charter at other pages like Displayname

[kuluruvineeth]

@dhairyasenjaliya could you please help me to setup code to run on ios and android. As of now i am able to run only web and desktop applications. Your assistance would really mean a lot to me, thanks.

[dhairyasenjaliya]

@kuluruvineeth please ping me on slack will happy to guid you

[johncschuster]

I have reproduced the behavior using the steps in the OP. Triaging!

2023-05-02_09-00-00.mp4

[MelvinBot]

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

[melvin-bot]

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

[francoisl]

I don't think this is a bug - there used to be an error message for this but it has been removed in 0c1546d (PR) on purpose, and the Testrail steps weren't updated accordingly. I'll close this and open an internal issue to update this Testrail case.