[HOLD for payment 2024-10-29] [$250] Switch to OD - Exit survey reason is not cleared after dismissing RHP and page refresh

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.0.44-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+shsb22cp111@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Login to any account
2. Navigate to settings > Switch to Expensify Classic
3. Select any of the options > Next > Fill in the next form with any text > Next
4. Before clicking on "Switch to Expensify Classic" dismiss the RHP by clicking back or anywhere on the page
5. Refresh your browser > Navigate to settings > Switch to Expensify Classic
6. Here notice that the previously selected answer is displayed as selected
7. Click Next, here notice that the next page field is empty
8. Navigate back to the first flow > Change to any other option > Next
9. Here notice that the previously field out text (before refreshing) is displayed

Expected Result:

The previously selected choice and the filled text is cleared once the field is dismissed and the page is refreshed

Actual Result:

Step 6. The previously selected answer is displayed as selected with a checkmark
Step 9. The previously filled-out answer is displayed

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6623606_1727983107927.2024-10-03_22_02_19.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843834311761874490
• Upwork Job ID: 1843834311761874490
• Last Price Increase: 2024-10-09
• Automatic offers:
• suneox | Reviewer | 104410311
• truph01 | Contributor | 104410313

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@anmurali FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[abzokhattab]

Proposal

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

The exit survey reason is not cleared after dismissing the RHP and refreshing the page.

What is the root cause of that problem?

We don't reset the draft reason when dismissing the modal here .

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

1. We should add a clearDraftReason utility function to the ExitSurvey functions. This function will set the Onyx value of EXIT_SURVEY_REASON_FORM_DRAFT to null when the component is mounted.

function clearDraftReason() {
    Onyx.set(ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM_DRAFT, null);
}

1. Then, call this function in the Exit Survey Reason page:

useEffect(() => {
    ExitSurvey.clearDraftReason();
}, []);

1. Remove || !draftReason from this useEffect .

2. Remove shouldSaveDraft from the InputWrapper .

POC

Screen.Recording.2024-10-04.at.12.17.31.mov

What alternative solutions did you explore? (Optional)

[truph01]

Edited by proposal-police: This proposal was edited at 2024-10-11 03:01:16 UTC.

Proposal

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

• The previously selected answer is displayed as selected with a checkmark
• The previously filled-out answer is displayed

What is the root cause of that problem?

• In this:

App/src/pages/settings/ExitSurvey/ExitSurveyReasonPage.tsx

Line 89 in 4ffbd42

shouldSaveDraft

and

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 141 in 4ffbd42

shouldSaveDraft

we always use shouldSaveDraft, which will always store the current input value to the draft. So

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

• Removing both shouldSaveDraft in above places can fix the issue.

• Then, we need to update the validate function in:

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Line 110 in 4ffbd42

validate={() => {

to:

    const validate = (values) => {
        const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.RESPONSE]);
        return errors;
    };

since previously, it used the data from draft.

• Also, change:

App/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx

Lines 64 to 67 in 4ffbd42

	const submitForm = useCallback(() => {
	ExitSurvey.saveResponse(draftResponse);
	Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_CONFIRM.getRoute(ROUTES.SETTINGS_EXIT_SURVEY_RESPONSE.route));
	}, [draftResponse]);

to:

    const submitForm = useCallback((values) => {
        ExitSurvey.saveResponse(values.response);   Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_CONFIRM.getRoute(ROUTES.SETTINGS_EXIT_SURVEY_RESPONSE.route));
    }, []);

What alternative solutions did you explore? (Optional)

• We can create function reset form:

function resetExitForm() {
    Onyx.set(ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM, null);
    Onyx.set(ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM_DRAFT, null);
    Onyx.set(ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM, null);
    Onyx.set(ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM_DRAFT, null);
}

• Update this:
  

  App/src/pages/settings/InitialSettingsPage.tsx

  Line 240 in 4c90d62

  routeName: ROUTES.SETTINGS_EXIT_SURVEY_REASON,

                              action() {
                                  resetExitForm();
                                  Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_REASON);
                              },

or

                              action() {
                                  resetExitForm();
                                  InteractionManager.runAfterInteractions(() => {
                                      Navigation.navigate(ROUTES.SETTINGS_EXIT_SURVEY_REASON);
                                  });
                              },

For the bug "The draft value saves for a response is not shown when we refresh the page and go to the response page"

• RCA: When we visit ExitSurveyResponsePage, we already have a logic to load the draft value to the input:
  

  App/src/components/Form/FormProvider.tsx

  Line 300 in abdfb72

  value: inputValues[inputID],

  
  

  App/src/components/Form/FormProvider.tsx

  Line 92 in abdfb72

  const [inputValues, setInputValues] = useState<Form>(() => ({...draftValues}));

  
  

  App/src/components/Form/FormProvider.tsx

  Line 88 in abdfb72

  const [draftValues] = useOnyx<OnyxFormDraftKey, Form>(`${formID}Draft`);

As we can see, the data for inputValues comes from draftValues, which is populated by useOnyx. When draftValues is still loading, it will be undefined, causing the state const [inputValues, setInputValues] = useState<Form>(() => ({...draftValues})) to initialize with an empty object {}.

• Solution: Update:

App/src/components/Form/FormProvider.tsx

Line 92 in abdfb72

const [inputValues, setInputValues] = useState<Form>(() => ({...draftValues}));

    const [draftValues, draftValuesResult] = useOnyx<OnyxFormDraftKey, Form>(`${formID}Draft`);
    const didInitValuesRef = useRef(false);
    const isLoadingDraftValue = isLoadingOnyxValue(draftValuesResult);
    useEffect(() => {
        if (isLoadingDraftValue || didInitValuesRef.current) {
            return;
        }
        didInitValuesRef.current = true;
        setInputValues({...draftValues});
    }, [draftValues, isLoadingDraftValue]);

With it, we only set the inputValues if the draftValues is loaded successfully.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[anmurali]

It feels like a nice to have, but sure, let's fix it.

[suneox]

Thanks for all the proposals. In this flow, we have implemented a draft functionality, and we need to retain this feature. We’re still looking for a proposal that maintains the draft functionality—we just need to ensure that we can start a new flow clearly.

[truph01]

Proposal updated

• I added alternative solution

[suneox]

The alternative solution from @truph01 proposal LGTM. It retains the draft functionality and only resets the flow when we start a new process as same the IOU.startMoneyRequest flow

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[abzokhattab]

But i think we use the clearDraft on mounting in multiple locations:
isnt it better to do it on the component level ? no?

we have this pattern in multiple locations, so that is why i preferred clearing using useEffect as i suggested to keep consistency:

• App/src/pages/workspace/reportFields/CreateReportFieldsPage.tsx

  Lines 89 to 91 in c3c7c7a

  	useEffect(() => {
  	ReportField.setInitialCreateReportFieldsForm();
  	}, []);

• App/src/pages/settings/Subscription/SubscriptionSize/index.tsx

  Lines 46 to 51 in c3c7c7a

  	useEffect(
  	() => () => {
  	FormActions.clearDraftValues(ONYXKEYS.FORMS.SUBSCRIPTION_SIZE_FORM);
  	},
  	[],
  	);

• App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

  Lines 135 to 144 in 1793c97

  	useEffect(() => {
  	if (!currentUserEmojiCode && !currentUserClearAfter && !draftClearAfter) {
  	User.updateDraftCustomStatus({clearAfter: DateUtils.getEndOfToday()});
  	} else {
  	User.updateDraftCustomStatus({clearAfter: currentUserClearAfter});
  	}
  	return () => User.clearDraftCustomStatus();
  	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
  	}, []);

cc @arosiclair @suneox

[suneox]

@abzokhattab Most of your reference code clears specific data upon mount but it doesn’t address clearing draft data or only clears draft data with specific logic. Therefore, it isn't a common pattern for clear draft data when starting a new flow.

[abzokhattab]

@abzokhattab Most of your reference code clears specific data upon mount but it doesn’t address clearing draft data or only clears draft data with specific logic. Therefore, it isn't a common pattern for clear draft data when starting a new flow.

Thanks for the prompt review i've cleaned the referenced examples ... but i think this approach makes the code more modular and keeps the clearing logic within the relevant component, reducing side effects and aligning with patterns already used in similar components like CreateReportFieldsPage and SubscriptionSize, ... . It keeps the codebase cleaner since the clearing logic is added on the component itself not by another component .

but lets see what @arosiclair thinks

Thanks again for your feedback!!

[twilight2294]

Edited by proposal-police: This proposal was edited at 2024-10-11 09:39:50 UTC.

Proposal

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

Actual Bug: The draft value saves for a response is not shown when we refresh the page and go to the response page

What is the root cause of that problem?

We are only meant to clear the draft values when the user actual goes to OD on the Confirm page:

Screen.Recording.2024-10-11.at.3.03.34.PM.mov

So here the actual bug is that when we fill out the reason and response then go to confirm page and click outside RHP without pressing confirm, then refresh and go back to flow, the draft value for response is not shown:

Screen.Recording.2024-10-11.at.3.05.46.PM.mov

the values should only be cleared when we click confirm and go to OD.

Here is the step where we set the values to null:

App/src/pages/settings/ExitSurvey/ExitSurveyConfirmPage.tsx

Lines 84 to 87 in 285bde8

	text={translate('exitSurvey.goToExpensifyClassic')}
	onPress={() => {
	ExitSurvey.switchToOldDot();
	Navigation.dismissModal();

App/src/libs/actions/ExitSurvey.ts

Lines 32 to 54 in abdfb72

	function switchToOldDot() {
	const optimisticData: OnyxUpdate[] = [
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_REASON_FORM_DRAFT,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM,
	value: null,
	},
	{
	onyxMethod: Onyx.METHOD.SET,
	key: ONYXKEYS.FORMS.EXIT_SURVEY_RESPONSE_FORM_DRAFT,
	value: null,
	},
	];

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

So to solve the actual bug here, we should display the draft value of the response we can do that by setting passing value prop to InputWrapper here:

--- a/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx
+++ b/src/pages/settings/ExitSurvey/ExitSurveyResponsePage.tsx
 
@@ -114,6 +115,7 @@ function ExitSurveyResponsePage({route, navigation}: ExitSurveyResponsePageProps
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.RESPONSE}
+                            value={draftResponse}
                             label={translate(`exitSurvey.responsePlaceholder`)}
                             accessibilityLabel={translate(`exitSurvey.responsePlaceholder`)}
                             role={CONST.ROLE.PRESENTATION}

This way we actually address the bug.

NOTE: This is the default behaviour we follow throughout the application with all forms

What alternative solutions did you explore? (Optional)

[twilight2294]

@suneox @arosiclair can you please review my proposal, I think the acutal bug here is that the draft value is not displayed for response, I have provided the solution along with video as well please check.

Even in the video attached in the bug description, you can see that the tester doesn't get the draft value for response they have to go back select another option and come back that is when they see the draft value

Also, the convention to pass value prop is followed throughout our app in major components like AddressForm:

App/src/components/AddressForm.tsx

Line 182 in abdfb72

<InputWrapper

TextSelector:

App/src/components/TextPicker/TextSelectorModal.tsx

Line 106 in abdfb72

<InputWrapper

[suneox]

@suneox @arosiclair can you please review my proposal, I think the acutal bug here is that the draft value is not displayed for response, I have provided the solution along with video as well please check.

@twilight294 Sure I'll start review your proposal within today

[twilight2294]

Thank you 😄

[truph01]

Proppsal updated

• @suneox I updated proposal if we only want to fix "The draft value saves for a response is not shown when we refresh the page and go to the response page"

[suneox]

Thanks for the update. Let’s ensure we clarify and follow the expected behavior:
* The previously selected choice * and * the filled text is cleared * once the field is dismissed (at step 4) and the page is refreshed (at step 5)

The latest proposals from @abzokhattab and @twilight294 still doesn't match the expected result.

cc: @arosiclair

[twilight2294]

@suneox that is what i am trying to put forward here, the actual bug is different then mentioned in the OP :)), If you check the card shipping missingDetails RHP flow, you can observe the same behaviour

[suneox]

@suneox that is what i am trying to put forward here, the actual bug is different then mentioned in the OP :)), If you check the card shipping missingDetails RHP flow, you can observe the same behaviour

@twilight294 I’m not sure about this. Let’s wait for the internal team to make a decision. If the expected behavior doesn't reset values when starting a new flow, maybe we can go with your solution.

[truph01]

If the expected behavior doesn't reset values when starting a new flow

@suneox Do you have any feedback about my updated solution?

[suneox]

If the expected behavior doesn't reset values when starting a new flow

@suneox Do you have any feedback about my updated solution?

@truph01 Your solution about reload page doesn't show draftValue can override the value or defaultValue has passed into the InputWrapper in other places after draftValue is loaded. Since this issue only occurs on this specific page, and we don't have context on another page so we should avoid making changes that could impact almost all forms. We need to wait for internal team feedback on the expected result

[truph01]

Your solution can override the value or defaultValue has passed into the InputWrapper in other places after draftValue is loaded

But we only want to set the value for defaultValue after the draftValue has loaded, right? Otherwise, while the draftValue is still loading, its value will be undefined, leading to the bug we mentioned in this issue.

Since this issue only occurs on this specific page, and we don't have context on another page

A similar bug can be reproduced in /settings/subscription/request-early-cancellation-survey, when we select any option and then refresh page, that option is not loaded as the default value:

Screen.Recording.2024-10-13.at.23.04.22.mov

We need to wait for internal team feedback on the #50215 (comment)

Sure, I just need to share my solution about that bug since you commented "If the expected behavior doesn't reset values when starting a new flow, maybe we can go with your solution."

[arosiclair]

The alternative solution from @truph01 proposal LGTM. It retains the draft functionality and only resets the flow when we start a new process as same the IOU.startMoneyRequest flow

🎀 👀 🎀 C+ reviewed

I agree with this. Let's reset the form if the user cancels. The draft can persist if they refresh without canceling.

[melvin-bot]

📣 @suneox 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @truph01 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[truph01]

PR is ready

[melvin-bot]

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

[melvin-bot]

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

• fix: Clear exit survey data #50765

If no regressions arise, payment will be issued on 2024-10-29. 🎊

For reference, here are some details about the assignees on this issue:

• @suneox requires payment automatic offer (Reviewer)
• @truph01 requires payment automatic offer (Contributor)

[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:

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

[suneox]

Checklist

• [@suneox] The PR that introduced the bug has been identified. Link to the PR: N/A
• [@suneox] 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. There isn’t an offending PR in this case, as this issue addresses an edge case where the reset value is missing when starting a new flow.
• [@suneox] 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: N/A
• [@suneox] Determine if we should create a regression test for this bug: N/A
• [@suneox] 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. N/A