[HOLD for payment 2023-08-14] [$250] Chat - Red underline on some pronouns

[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. Go to profile > pronouns
2. Select something like Fae/Faer
3. Go back and open the pronouns again

Expected Result:

Pronouns input should not show spelling error

Actual Result:

Pronouns input shows spelling error by red underline

Workaround:

Unknown

Platforms:

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

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

Version Number: 1.3.43.2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Recording.3787.mp4

Screen.Recording.2023-07-20.at.2.56.23.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @chiragxarora
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1689845093487019

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01d19d5efab5b26952
• Upwork Job ID: 1682111824131657728
2023-07-20
• Automatic offers:
• | | 0
• chiragxarora | Contributor | 25679429
• chiragxarora | Reporter | 25679430

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

Proposal

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

Red underline on pronouns indicating error of spellings

What is the root cause of that problem?

Root cause of the issue is that we are using <SelectionListRadio/> to render the pronouns

App/src/pages/settings/Profile/PronounsPage.js

Line 107 in e87f2eb

<SelectionListRadio

which uses a <TextInput/>

App/src/components/SelectionListRadio/BaseSelectionListRadio.js

Lines 222 to 233 in e87f2eb

	<TextInput
	ref={textInputRef}
	label={props.textInputLabel}
	accessibilityLabel={props.textInputLabel}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
	value={props.textInputValue}
	placeholder={props.textInputPlaceholder}
	maxLength={props.textInputMaxLength}
	onChangeText={props.onChangeText}
	keyboardType={props.keyboardType}
	selectTextOnFocus
	/>

uses default value of spellCheck which it inherits from autoCorrect which has default value as true, thus spellCheck is true here

This causes the red underline on some pronouns which have wrong spellings according to the dictionary

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

We need to set spellCheck as false for the pronouns page since it has some non english words too

And we can do it in ways:

• either we can set spellcheck as false in the textinput of selectionlistradio itself, it will be added globally and affect all the lists using radio lists (although globally done won't be a bad choice since its being used in 2 more places with textinput: year picker and timezone select page, both of these can keep the spellcheck as off)
• or we can send a prop from pronouns page and do it conditionally just for the pronouns page

Results

What alternative solutions did you explore? (Optional)

None

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01d19d5efab5b26952

[melvin-bot]

Current assignee @sakluger is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)

[mountiny]

Coming from slack, this is really minor bug, making it $250 https://expensify.slack.com/archives/C049HHMV9SM/p1689872197554259?thread_ts=1689845093.487019&cid=C049HHMV9SM

[melvin-bot]

Upwork job price has been updated to $250

[ghost]

I would like to work on it

[parasharrajat]

@chiragxarora's proposal looks good to me. let's do this to the SelectionListRadio globally.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[hungvu193]

I saw few similar reported bugs about "red line" like this. Why don't we just set the autoCorrect's defaultProps inside TextInput to false and fixed this in one go?

[sakluger]

@mountiny @parasharrajat what do you think about @hungvu193's idea to fix multiple similar issues in one go? I like the concept of taking a more holistic approach, but don't have enough context on the issue to know if it makes sense in this situation.

[ghost]

Hey @parasharrajat do we need to put proposal for this issue even if it is a $250 issue ?

[sakluger]

Also @hungvu193 could you link those other similar issues that you saw?

[hungvu193]

Also @hungvu193 could you link those other similar issues that you saw?

For example here: #22966, it was decided to close.

[parasharrajat]

@AnshuAgarwal24 Yes. There are no exceptions except where we say so explicitly.

[chiragxarora]

I don't think turning autoCorrect/spellcheck off for all the inputs is good idea, my reasoning is, spellcheck is a good thing to have for user's convenience and every app does it. But for pronouns page its a bug because pronouns are something user DID NOT input, like the app provides a list of pronouns itself and displaying spelling error in that is kinda weird

@parasharrajat what do you think?

[parasharrajat]

I never said to apply it to all but the selectionListRatio.

[chiragxarora]

I saw few similar reported bugs about "red line" like this. Why don't we just set the autoCorrect's defaultProps inside TextInput to false and fixed this in one go?

was referring to the above conversation

[parasharrajat]

I agree with your comments for this.

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR:
• [@parasharrajat] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@parasharrajat] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@parasharrajat] Determine if we should create a regression test for this bug.
• [@parasharrajat] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@sakluger] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[sakluger]

Paid $500 to @chiragxarora (for bug report and Contributor payment).

@parasharrajat can you please complete the BZ checklist and request payment via newdot if you haven't already? Thanks!

[parasharrajat]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@parasharrajat] The PR that introduced the bug has been identified. Link to the PR: None, it is a new change.

• [@parasharrajat] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: NA

• [@parasharrajat] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: NA

• [@parasharrajat] Determine if we should create a regression test for this bug. Yes

• [@parasharrajat] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Steps

1. Open the app.

2. Go to settings > profile > pronouns

3. Select fae/faer and go back

4. Open the pronouns page again and see there is no red underline on the search input value.

5. Go to the following pages.

   1. profile > display name and enter ksnkdnsd for first name and last name.
   2. Do the same for a legal name.
   3. Go to FAB > new chat and enter ksnkdnsd.
   4. Go to FAB > new group and enter ksnkdnsd
   5. Request money > enter amount > now again enter ksnkdnsd
   6. split bill > enter amount > now again enter ksnkdnsd
   7. Go to settings > workspaces > new workspace > settings > WS name, do the same
   8. Go to workspace > pick one > members > enter ksnkdnsd
   9. Go to workspace > members > invite > enter ksnkdnsd
   10. Click FAB > assign task > enter ksnkdnsd in title > complete other details > open the task again from report
   11. go to settings > payments > debit card > enter ksnkdnsd in name & shipping address
   12. go to settings > profile > personal details > home address > enter ksnkdnsd in address lines, state, city
   13. click FAB > new room > enter ksnkdnsd in room name

6. Observe that in all of the above, there is no red underline

Do you agree 👍 or 👎 ?

[chiragxarora]

@sakluger this qualifies for time bonus too, because merging was delayed because of merge conflicts and CME

[parasharrajat]

Agreed with ⬆️

[chiragxarora]

Bump @sakluger

[sakluger]

Sorry guys, I didn't notice that this one was ready because it stayed as a weekly.

I add a $125 bonus for @chiragxarora.

Summarizing payouts for this issue:

Reporter and Contributor: @chiragxarora $250 + 375 = $625 (paid via Upwork)
Contributor+: @parasharrajat $375 (payable via Manual Request)

Above payments include efficiency bonus 🎉
Upwork job: https://www.upwork.com/jobs/~01d19d5efab5b26952

Assigning @anmurali and @JmillsExpensify to approve NewDot payment.

[sakluger]

@JmillsExpensify is handling these, unassigning @anmurali

[parasharrajat]

I will request this next week.

[grgia]

Not overdue, payments are being processed

[melvin-bot]

@JmillsExpensify, @sakluger, @parasharrajat, @grgia, @chiragxarora Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[sakluger]

@parasharrajat just wanted to make sure, did you request payment yet?

[melvin-bot]

@JmillsExpensify, @sakluger, @parasharrajat, @grgia, @chiragxarora Whoops! This issue is 2 days overdue. Let's get this updated quick!

[grgia]

bump @parasharrajat #23303 (comment)

[sakluger]

Asked for an update in expensify-open-source in Slack.

[sakluger]

@parasharrajat said he hasn't requested yet but is tracking outstanding payment requests, so we are okay to close.

[parasharrajat]

Payment requested as per #23303 (comment)

[JmillsExpensify]

$375 payment for @parasharrajat is approved based on BZ summary.