[C+ Checklist Needs Completion] [$1000] The State filled is not cleared after selecting another country

[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. Go profile > Personal detail > Home Address Page
2. Click on State and choose any state
3. Now click on Country and select a country other than the United States.
   Notice that the state filled shows an abbreviation of the previously selected State

Expected Result:

The State filled is cleared

Actual Result:

The State filled is not cleared. Shows abbreviation of previously selected State

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.47-3
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

Test92.Stateabrrivation-1.mp4

Recording.1400.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f0fbcbd5a20b5cfa
• Upwork Job ID: 1686035992494268416
• Last Price Increase: 2023-07-31
• Automatic offers:
• daveSeife | Reporter | 25899761
• dukenv0307 | Contributor | 25996636

[melvin-bot]

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

[jeet-dhandha]

Proposal

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

• Currently we are selecting State first (when default Country is US) and then selecting other Country lets say India, then State is not getting empty.

What is the root cause of that problem?

• We are not resetting the state input in form when we are changing the country input.
• Also even if we update the state component from Picker to TextInput the form's value won't get updated.
• Hence showing the previous selected state.

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

• We can implement a custom formRef which acts like a ref as the below object and it changes values when inputValues or inputRefs changes in Form component:

{  resetField: (inputID) => {... reset the input field} }

• We can use this ref in handleAddressChange function of AddressPage component to reset the State input field.

Form.js Code Reference

useEffect(() => {
    props.formRef({
        resetField: (inputID) => {
            if (!inputRefs.current[inputID] || !inputValues[inputID]) return;
            setInputValues((prevState) => ({...prevState, [inputID]: ''}));
        },
    });
}, [inputRefs, props.formRef, inputValues]);

When using `Form` in AddressPage.js

const handleAddressChange = (value, key) => {
        if (key !== 'country') {
            return;
        }
+       if (value !== currentCountry && formRef.current && formRef.current.resetField) {
+           formRef.current.resetField('state');
+       }
        setCurrentCountry(value);
    };
...rest code

<Form ...rest
+  formRef={(ref) => formRef.current = ref}
>

What alternative solutions did you explore? (Optional)

• N/A

[dukenv0307]

Proposal

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

The State filled is not cleared after selecting another country

What is the root cause of that problem?

We handle the change of country in handleAddressChange here and we only change the country, not clear state

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

Lines 118 to 122 in eb02006

	const handleAddressChange = (value, key) => {
	if (key !== 'country') {
	return;
	}
	setCurrentCountry(value);

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

1. We can create a state to control state the same as country

const [state, setState] = useState(address.state);

2. Add onValueChange={handleAddressChange} into StatePicker and TextInput

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

Line 182 in eb02006

<StatePicker

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

Line 188 in eb02006

<TextInput

3. Change the default value here to state

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

Line 193 in eb02006

defaultValue={address.state || ''}

4. change defaultValue prop of TextInput to value
   

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

   Line 184 in eb02006

   defaultValue={address.state}

5. In handleAddressChange we check if the key is country we will reset the state and if the key is state we set value to it state

const handleAddressChange = (value, key) => {
    if (key !== 'country' && key !== 'state') {
        return;
    }
    if (key === 'country') {
        setCurrentCountry(value);
        setState('');
        return;
    }
    setState(value);
};

What alternative solutions did you explore? (Optional)

[greg-schroeder]

Reproduced. Agreed that the state field should just be cleared

[melvin-bot]

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

[melvin-bot]

Current assignee @greg-schroeder is eligible for the External assigner, not assigning anyone new.