Skip to content

Update country and state when the draft is updated #85547

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.

Sign up for GitHub

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

Merged
arosiclair merged 1 commit into from
Mar 18, 2026
+18 −3
Merged

Update country and state when the draft is updated #85547

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 18 additions & 3 deletions src/pages/MissingPersonalDetails/subPages/Address.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useCallback, useState} from 'react';
import React, {useCallback, useRef, useState} from 'react';
import {View} from 'react-native';
import AddressSearch from '@components/AddressSearch';
import CountryPicker from '@components/CountryPicker';
Expand Down Expand Up @@ -26,11 +26,26 @@ function AddressStep({isEditing, onNext, personalDetailsValues}: CustomSubPagePr
const {translate} = useLocalize();
const styles = useThemeStyles();

const [currentCountry, setCurrentCountry] = useState(personalDetailsValues[INPUT_IDS.COUNTRY]);
const [state, setState] = useState(personalDetailsValues[INPUT_IDS.STATE]);
const currentCountryDraft = personalDetailsValues[INPUT_IDS.COUNTRY];
const currentStateDraft = personalDetailsValues[INPUT_IDS.STATE];
const [currentCountry, setCurrentCountry] = useState(currentCountryDraft);
const [state, setState] = useState(currentStateDraft);
const [city, setCity] = useState(personalDetailsValues[INPUT_IDS.CITY]);
const [zipcode, setZipcode] = useState(personalDetailsValues[INPUT_IDS.ZIP_POST_CODE]);

const prevCountryDraft = useRef(currentCountryDraft);
const prevStateDraft = useRef(currentStateDraft);

if (prevCountryDraft.current !== currentCountryDraft) {
prevCountryDraft.current = currentCountryDraft;
setCurrentCountry(currentCountryDraft);
}

if (prevStateDraft.current !== currentStateDraft) {
prevStateDraft.current = currentStateDraft;
setState(currentStateDraft);
Copy link
Contributor Author

@bernhardoj bernhardoj Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I use the same approach we used in FormProvider. We need to update the local state here because we use it as the input value.

App/src/pages/MissingPersonalDetails/subPages/Address.tsx

Lines 165 to 188 in e149717

<InputWrapper
InputComponent={CountryPicker}
inputID={INPUT_IDS.COUNTRY}
value={currentCountry}
onValueChange={handleAddressChange}
/>
</View>
{isUSAForm ? (
<View style={[styles.mt2, styles.mhn5]}>
<InputWrapper
InputComponent={StatePicker}
inputID={INPUT_IDS.STATE}
value={state as State}
onValueChange={handleAddressChange}
/>
</View>
) : (
<InputWrapper
InputComponent={TextInput}
inputID={INPUT_IDS.STATE}
label={translate('common.stateOrProvince')}
aria-label={translate('common.stateOrProvince')}
role={CONST.ROLE.PRESENTATION}
value={state}

And FormProvider will show the value from value.

App/src/components/Form/FormProvider.tsx

Lines 333 to 334 in e149717

if (inputProps.value !== undefined) {
inputValues[inputID] = inputProps.value;

}

const handleSubmit = usePersonalDetailsFormSubmit({
fieldIds: STEP_FIELDS,
onNext,
Expand Down
Loading