-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[C+ Checklist Needs Completion] [$1000] The State filled is not cleared after selecting another country #23839
Comments
Triggered auto assignment to @greg-schroeder ( |
Bug0 Triage Checklist (Main S/O)
|
ProposalPlease re-state the problem that we are trying to solve in this issue.
What is the root cause of that problem?
What changes do you think we should make in order to solve the problem?
Form.js Code ReferenceuseEffect(() => {
props.formRef({
resetField: (inputID) => {
if (!inputRefs.current[inputID] || !inputValues[inputID]) return;
setInputValues((prevState) => ({...prevState, [inputID]: ''}));
},
});
}, [inputRefs, props.formRef, inputValues]); When using `Form` in AddressPage.jsconst 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)
|
ProposalPlease 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 App/src/pages/settings/Profile/PersonalDetails/AddressPage.js Lines 118 to 122 in eb02006
What changes do you think we should make in order to solve the problem?
3. Change the default value here to state
What alternative solutions did you explore? (Optional) |
Reproduced. Agreed that the state field should just be cleared |
Job added to Upwork: https://www.upwork.com/jobs/~01f0fbcbd5a20b5cfa |
Current assignee @greg-schroeder is eligible for the External assigner, not assigning anyone new. |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel ( |
Taking this over. |
Left a comment here for volunteers to take over |
@greg-schroeder Can you please assign this to me so I can start reviewing the proposals? |
ProposalPlease re-state the problem that we are trying to solve in this issue.The problem we are trying to solve in this issue is that the "state" field is not clearing after selecting another country in the What is the root cause of that problem?The root cause of the problem lies in the What changes do you think we should make in order to solve the problem?To solve the problem, we need to modify the Here's the updated import React, {useState} from 'react';
import lodashGet from 'lodash/get';
import {CONST} from 'expensify-common/lib/CONST';
import * as PersonalDetails from '../../../../libs/actions/PersonalDetails';
import styles from '../../../../styles/styles';
// (Add other necessary imports)
function AddressPage() {
const [privatePersonalDetails, setPrivatePersonalDetails] = useState({
address: {
street: '',
city: '',
state: '',
zip: '',
country: '',
},
});
const [currentCountry, setCurrentCountry] = useState(
PersonalDetails.getCountryISO(
lodashGet(privatePersonalDetails, 'address.country')
) || CONST.COUNTRY.US
);
// Rest of the component code...
const handleAddressChange = (value, key) => {
if (key === 'country') {
setCurrentCountry(value);
// Reset the "state" field to an empty string when a new country is selected
setPrivatePersonalDetails({
...privatePersonalDetails,
address: {...privatePersonalDetails.address, state: ''}
});
}
};
// Rest of the component code...
} By adding the What alternative solutions did you explore? (Optional)NA |
ProposalPlease re-state the problem that we are trying to solve in this issue.The issue at hand is that the "state" field fails to clear after selecting a different country on the Home Address page within the Personal Details section of the profile. What is the root cause of that problem?In the AddressPage.js file, there is a code snippet that handles the UI/UX behavior based on the selected country. If the country is not the United States (US), the StatePicker component is replaced with a TextInput box. However, during this transition, the TextInput box displays the previous state value for the US. This happens because both the StatePicker and TextInput components use the same 'state' value. To address this issue, we can create a separate 'state' hook variable specifically for the TextInput box when a non-US country is selected. We can then set this 'state' variable to the TextInput box. Consequently, when the user selects a country other than the US, we can reset the TextInput box for the non-US country. Subsequently, if the user selects the US again, the previous 'state' value will be restored. What changes do you think we should make in order to solve the problem?To address this issue, we can implement a new 'state' hook variable by using the following code:
To ensure the default value is set to an empty string, we need to initialize the 'currentState' variable accordingly. In the Finally, we need to establish a connection between the
What alternative solutions did you explore? (Optional)N/A |
📣 @ares-dev05! 📣
|
|
1 similar comment
|
Contributor details |
✅ Contributor details stored successfully. Thank you for contributing to Expensify! |
📣 @allroundexperts Please request via NewDot manual requests for the Reviewer role ($1000) |
📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app! Offer link |
Thanks, LGTM 👍🏼 That said, I wonder if we should think about generalizing the address form a little bit. It looks like there's a lot of overlap between That's probably out-of-scope for this issue though. |
@allroundexperts The PR is ready for review #24148 |
🎯 ⚡️ Woah @allroundexperts / @dukenv0307, great job pushing this forwards! ⚡️ The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉
On to the next one 🚀 |
|
The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.52-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue: If no regressions arise, payment will be issued on 2023-08-17. 🎊 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.
For reference, here are some details about the assignees on this issue:
As a reminder, here are the bonuses/penalties that should be applied for any External issue:
|
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:
|
Issue Participants: Issue reported by: @daveSeife Was this issue merged in time to be eligible for the speed bonus? Yes Payment summary: Reporter: $250 |
Please request payment via NewDot @allroundexperts - all that's left here is taking care of the checklist! |
Requested payment in ND. Onto the checklist! |
Checklist
|
Filing regression test and closing! |
Reviewed the details for @allroundexperts. $1,500 approved for payment in NewDot based on BZ summary above. |
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:
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?
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
The text was updated successfully, but these errors were encountered: