[HOLD for payment 2023-04-05] [$1000] State is not updated when address outside USA is entered when the state picker is displayed

[kavimuru]

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 ND.
2. Go to Settings > Profile > Personal Details > Home address.
3. Make sure that an address has not been saved already / a USA address has been saved.
4. Enter any location outside the USA in the address line 1. Notice that the state is automatically filled.
5. Enter a location inside the USA. Notice that the TextInput changes to StatePicker and the state is correctly displayed.
6. Enter a location outside the USA.
7. Notice the bug that the state is not updated but all other values are updated correctly.

Expected Result:

State should be set automatically

Actual Result:

State field is left empty

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.2.78-0
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:

2023-02-24.23-00-29.mp4

Recording.1618.mp4

Expensify/Expensify Issue URL:
Issue reported by: @ashimsharma10 @Prince-Mendiratta
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1677259948200949

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01208ef7601c16165a
• Upwork Job ID: 1633201299045953536
• Last Price Increase: 2023-03-22

[MelvinBot]

Triggered auto assignment to @arielgreen (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

[MelvinBot]

@arielgreen Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

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

[arielgreen]

This was already reported by Ashim Sharma here; asked for his GH handle so we can give proper credit here.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01208ef7601c16165a

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[Prince-Mendiratta]

Proposal

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

In this issue, when the StatePicker dropdown is visible, if we were to input an address based in the USA, the state input changes to a textInput but without the state displayed.

What is the root cause of that problem?

The root cause behind the issue lies in the way the state input changes when a new address is entered.

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Lines 179 to 191 in b703eac

	{this.state.isUsaForm ? (
	<StatePicker
	inputID="state"
	defaultValue={address.state || ''}
	/>
	) : (
	<TextInput
	inputID="state"
	label={this.props.translate('common.stateOrProvince')}
	defaultValue={address.state || ''}
	maxLength={CONST.FORM_CHARACTER_LIMIT}
	/>
	)}

When we enter a USA based address, the state picker has a value assigned to it which is used to select the state in the dropdown. When we manually change the country to any other outside the USA, it correctly displays the previous value.

However, when a new address is selected from outside the USA, the state picker defaults to an empty value. This happens because of the value being overwritten by the Form component. In this component, each part of the address has it's value changed one by one:

App/src/components/AddressSearch.js

Lines 145 to 148 in b703eac

	_.each(values, (value, key) => {
	const inputKey = lodashGet(props.renamedInputKeys, key, key);
	props.onInputChange(value, inputKey);
	});

The value object has state before the country key. This makes it happen that the state's value is changed before the country's value and thus, when the country value changes, the state input changes from the StatePicker to the TextInput. Due to this transition, the value of the state component resets and thus an empty string is shown.

App/src/components/AddressSearch.js

Lines 123 to 129 in b703eac

	const values = {
	street: props.value ? props.value.trim() : '',
	city: city || cityFallback,
	zipCode,
	state,
	country: '',
	};

EDIT
The reason behind why exactly the state value is set to an empty string when we switch from a StatePicker to TextInput can be understood by following this example:

1. I set a US based address. The chosen state is let's say Texas. This will make the state input have a value TX.
2. I enter another address based outside the USA. Let's say the state on the new address is Delhi, which is not an item in the StatePicker.
3. By the order of the AddressSearch, the state field is updated. Now, since the country is still US, the StatePicker is in play. When the value provided to it is Delhi, it does not exist in the list of items provided to the Picker. This causes the Picker to change the value to an empty string. Source - https://www.npmjs.com/package/react-native-picker-select, Props section
4. Now, the country changes to outside USA. This causes the TextInput to render with an empty value.

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

The fix can be as simple as changing the country's value first and then the state's value. This can be achieved by reordering the values object to have the country key at a higher position than state. This is the best solution for this issue since it does not delve deep into the code, especially the critical Form.js component.

What alternative solutions did you explore? (Optional)

EDIT
We could also modify the Picker component. Here, we can add a condition in the onInputChange function:

if (!_.findKey(this.props.items, item => item.value === value)) {
    return;
}

This will allow the value to not default to an empty one when any value outside the list of items is encountered. However, I do not recommend this option since this issue is the ONLY occurrence of this issue with the Picker component. There are many other components that either directly or indirectly make use of the Picker component and well disabling fallback to empty string when the value is not found is a pretty big deal and can have an unknown impact on those components. Since this is currently the only occurence of this issue AND we already have a simple fix, that is to reorder the properties, I don't think it would be a good idea to modify the Picker just yet. If there are any other issues in the future, then we can consider to add this condition and modify the other components accordingly if required.

[allroundexperts]

Proposal

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

Re-selecting an address on address search page causes the state to not change.

What is the root cause of that problem?

The root cause of the issue is an incorrect render of the Picker component when it receives a value that is not defined in the list of items. In this case, the state value (Non US state) does not exist in the items (only US states) in the state selection picker component. Since the value does not exist in the items, the picker component sets the value as "". This causes another onInputChange event which overrides the previous state.

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

I think we should solve the issue in the Picker component. If the value supplied does not exist in the list of items that are supplied, then we should log a warning in the console and NOT update the component. The following can be added to the Picker component:

shouldComponentUpdate(newProps) {
        return _.find(newProps.items, item => item.value === newProps.value);
    }

We'll also need the component to extend React.Component instead of React.PureComponent.

Alternatively, we can also prevent the extra re-render by creating a fix upstream in the react-native-web repository. In my opinion, this is a simpler fix then trying to fix it upstream.

What alternative solutions did you explore? (Optional)

Changing the order of fields in the AddressSearch component also works but its more of a work around. It does not address the root cause which is the additional render of the picker component if the supplied value does not exist in any of the supplied items. I also think that changing the order is a fragile move and we should avoid it.

[logiclingusitic]

Proposal

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

State is not updated when address outside USA is entered when the state picker is displayed #15633

What is the root cause of that problem?

For some countries, the state picker is not displayed. For these countries, the state field is a text field. When a user enters a state outside the US, the state field is not updated as the data returned from the google API is not consistent.

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

We would have to make changes to the google API to return the state code instead of the state name. This would allow us to update the state field when a user enters a state outside the US.
or we could map the states returned for different countries to the state codes and update the state field accordingly.

What alternative solutions did you explore? (Optional)

Doing the mapping of each country response form the google to know where our required data is located.

[MelvinBot]

📣 @logiclingusitic! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[logiclingusitic]

Contributor details
Your Expensify account email: rumanttariq@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01ea3442edaaf1bd32

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[arielgreen]

@ashimsharma10 FYI

[MelvinBot]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[ashimsharma10]

Contributor details
Your Expensify account email: 073bct508.ashim@pcampus.edu.np
Upwork Profile Link: https://www.upwork.com/freelancers/~018a92cf13e1e88eed

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Prince-Mendiratta]

PR is up for review!

Applied in upwork.

cc @rushatgabhane @arielgreen @techievivek

[MelvinBot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[MelvinBot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.91-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [StatePicker] USA to non USA address should not reset state field value #16466

If no regressions arise, payment will be issued on 2023-04-05. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter @ashimsharma10 @Prince-Mendiratta
• Contributor that fixed the issue @Prince-Mendiratta
• Contributor+ that helped on the issue and/or PR @rushatgabhane

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[MelvinBot]

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:

• [@rushatgabhane / @techievivek] The PR that introduced the bug has been identified. Link to the PR:
• [@rushatgabhane / @techievivek] 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:
• [@rushatgabhane / @techievivek] 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:
• [@arielgreen] Determine if we should create a regression test for this bug.
• [@rushatgabhane] 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.
• [@arielgreen] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/275101

[Prince-Mendiratta]

Posting the timeline for this issue here for an overview, calculated using this tool:

Issue timeline analysis:
🐛 Issue created at: Fri, 03 Mar 2023 01:00:53 GMT
🧯 Help Wanted at: Tue, 07 Mar 2023 20:22:05 GMT
🕵🏻 Contributor assigned at: Thu, 23 Mar 2023 23:31:24 GMT
🛸 PR created at: Fri, 24 Mar 2023 03:26:15 GMT
🎯 PR merged at: Tue, 28 Mar 2023 08:44:36 GMT
⌛ Business Days Elapsed between assignment and PR merge: 2

💰 Timeline Bonus/Penalty: 50% Bonus! 🎉

[allroundexperts]

Posting the timeline for this issue here for an overview, calculated using this tool:

Issue timeline analysis: 🐛 Issue created at: Fri, 03 Mar 2023 01:00:53 GMT 🧯 Help Wanted at: Tue, 07 Mar 2023 20:22:05 GMT 🕵🏻 Contributor assigned at: Thu, 23 Mar 2023 23:31:24 GMT 🛸 PR created at: Fri, 24 Mar 2023 03:26:15 GMT 🎯 PR merged at: Tue, 28 Mar 2023 08:44:36 GMT ⌛ Business Days Elapsed between assignment and PR merge: 2

💰 Timeline Bonus/Penalty: 50% Bonus! 🎉

Nice @Prince-Mendiratta 👍 👍 👍

[allroundexperts]

Would be awesome if we can integrate this into Melvin.

[Prince-Mendiratta]

Thanks @allroundexperts! @mountiny will try to work on this when he has some extra bandwidth 💯

[arielgreen]

Posting the timeline for this issue here for an overview, calculated using this tool:

Issue timeline analysis: 🐛 Issue created at: Fri, 03 Mar 2023 01:00:53 GMT 🧯 Help Wanted at: Tue, 07 Mar 2023 20:22:05 GMT 🕵🏻 Contributor assigned at: Thu, 23 Mar 2023 23:31:24 GMT 🛸 PR created at: Fri, 24 Mar 2023 03:26:15 GMT 🎯 PR merged at: Tue, 28 Mar 2023 08:44:36 GMT ⌛ Business Days Elapsed between assignment and PR merge: 2

💰 Timeline Bonus/Penalty: 50% Bonus! 🎉

@Prince-Mendiratta this is very very cool!

[arielgreen]

Issuing the following payments:
@ashimsharma10 $250 reporting bonus
@Prince-Mendiratta $1000 for fixing the issue + 50% bonus + $250 reporting bonus = $1750
@rushatgabhane $1000 C+ + 50% bonus = $1500

[arielgreen]

@rushatgabhane what are your thoughts on whether or not a regression test would be valuable here?

[rushatgabhane]

Sure, let's add a regression test for it.

1. Login to new dot.
2. Go to Settings > Profile > Personal Details > Home Address.
3. Enter an address inside the USA which has a state. ( Sample - Arrivals, choose any USA suggestion)
4. Enter an address outside the USA which has a state. ( Sample - Poligon, choose the Spain address)
5. Ensure that the State value is set correctly.

[arielgreen]

Sounds good! Creating an issue.

@rushatgabhane @techievivek can you please complete the checklist so we can close this issue out?

[techievivek]

Done. We don't need to start a discussion because this is not related to a regression, so we are all good here. Thanks, @arielgreen.