[HOLD for payment 2025-01-24] [$250] Bank account - App does not trigger required field validation when no state is selected

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.78-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team

Action Performed:

1. Open the app
2. Open settings->workspaces->any workspace->workflows->connect bank account->connect manually
3. Go to company information page and check each field shows error when we focus away without making a selection
4. Open the state field
5. Without making any selection go back

Expected Result:

App should trigger required field validation when we focus / open state field and focus away (as in PR #33926)

Actual Result:

App does not trigger required field validation when we focus / open state field and focus away.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021874219392873534463
• Upwork Job ID: 1874219392873534463
• Last Price Increase: 2025-01-07
• Automatic offers:
• truph01 | Contributor | 105678945

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.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-12-25 18:59:32 UTC.

Proposal

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

Bank account - App does not trigger required field validation when no state is selected

What is the root cause of that problem?

We run validate onBlur but we are not bluring on modal close here

App/src/components/PushRowWithModal/index.tsx

Lines 52 to 57 in 12e0941

	const handleModalClose = () => {
	setIsModalVisible(false);
	};
	const handleModalOpen = () => {

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

We can apply similar fix as we did in here by blurring on modal close

    onBlur,
}: PushRowWithModalProps) {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const handleModalClose = () => {
        onBlur?.();
        setIsModalVisible(false);
    };

we can also add a new prop of shouldBlurOnModalClose to make it optional and only call the blurring if true so that we can use it specifically for places we want.
BTW we can apply the same fix for StatePicker, CountryPicker and also other similar components where needed

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

[truph01]

Proposal

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

• App does not trigger required field validation when we focus / open state field and focus away.

What is the root cause of that problem?

• In the bank account flow, we utilize the AddressFormFields component. Within this component, both the state picker and country picker rely on the PushRowWithModal component.

• The PushRowWithModal was introduced in PR #51173. However, this implementation did not account for the bug we addressed in PR #33926. The root cause analysis (RCA) and corresponding solution for that issue are detailed here.

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

• The general approach will align with PR #35926. Here's the detailed plan:

• Introduce a new ref:

const shouldBlurOnCloseRef = useRef(true);

Add this in PushRowWithModal.

• Update the modal close handler:

App/src/components/PushRowWithModal/index.tsx

Lines 53 to 55 in 12e0941

	const handleModalClose = () => {
	setIsModalVisible(false);
	};

    const handleModalClose = () => {
        if (shouldBlurOnCloseRef.current) {
            onBlur?.(); // onBlur comes from PushRowWithModalProps
        }
        setIsModalVisible(false);
    };

• Modify the modal open handler:

Add the following line at line:

        shouldBlurOnCloseRef.current = false;

• Ensure backward compatibility:

Introduce a new flag parameter, such as shouldBlurInputOnCloseModal. Apply the above changes only when this flag is set to true. This will maintain backward compatibility for components relying on the existing behavior.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

[huult]

Proposal

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

App does not trigger required field validation when no state is selected

What is the root cause of that problem?

We are missing the addition of onBlur to validate the form when the modal is closed or when navigating back to trigger form validation

App/src/components/PushRowWithModal/index.tsx

Line 54 in 3ae86bc

setIsModalVisible(false);

onBlur to trigger onValidate:

App/src/components/Form/FormProvider.tsx

Lines 349 to 374 in 08f8314

	onBlur: (event) => {
	// Only run validation when user proactively blurs the input.
	if (Visibility.isVisible() && Visibility.hasFocus()) {
	const relatedTarget = event && 'relatedTarget' in event.nativeEvent && event?.nativeEvent?.relatedTarget;
	const relatedTargetId = relatedTarget && 'id' in relatedTarget && typeof relatedTarget.id === 'string' && relatedTarget.id;
	// We delay the validation in order to prevent Checkbox loss of focus when
	// the user is focusing a TextInput and proceeds to toggle a CheckBox in
	// web and mobile web platforms.
	setTimeout(() => {
	if (
	relatedTargetId === CONST.OVERLAY.BOTTOM_BUTTON_NATIVE_ID ||
	relatedTargetId === CONST.OVERLAY.TOP_BUTTON_NATIVE_ID ||
	relatedTargetId === CONST.BACK_BUTTON_NATIVE_ID
	) {
	return;
	}
	setTouchedInput(inputID);
	// We don't validate the form on blur in case the current screen is not focused
	if (shouldValidateOnBlur && isFocusedRef.current) {
	onValidate(inputValues, !hasServerError);
	}
	}, VALIDATE_DELAY);
	}
	inputProps.onBlur?.(event);
	},

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

To resolve this issue, we applied the previous solution. In this solution, onBlur is called to trigger form validation when the value is empty or has changed. If the value has not changed, onBlur does not need to be called.

1 Create new state

App/src/components/PushRowWithModal/index.tsx

Line 52 in 3ae86bc

  const [valueChanged, setValueChanged] = useState(false);

2. When the modal is closed, we need to check if the value is empty or has changed, and then trigger the onBlur call.

App/src/components/PushRowWithModal/index.tsx

Line 53 in 3ae86bc

const handleModalClose = () => {

Update to:

    const handleModalClose = () => {
        if (!value || valueChanged) { // add this line
            onBlur?.(); // add this line
        } // add this line
        setIsModalVisible(false);
    };

3. Update valueChanged state

App/src/components/PushRowWithModal/index.tsx

Line 61 in 3ae86bc

const handleOptionChange = (optionValue: string) => {

Update to:

    const handleOptionChange = (optionValue: string) => {
        onInputChange(optionValue);
        setValueChanged(optionValue !== value); // add this line

        if (stateInputIDToReset) {
            onInputChange('', stateInputIDToReset);
        }
    };

POC

Screen.Recording.2024-12-31.at.00.02.29.mov

Test branch

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@anmurali Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[melvin-bot]

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

[truph01]

Note for reviewer: The solution should cover the comment below:

if not, the regression will be encountered (The error message is displayed for a while after user selecting any option). See that comment in PR

[melvin-bot]

@akinwale, @anmurali Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[anmurali]

@akinwale have you reviewed the proposals here? Let's pick one asap so we can move forward.

[akinwale]

@anmurali I'll review the proposals today.

[melvin-bot]

@akinwale @anmurali this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[akinwale]

After reviewing the proposals, we can move forward with @truph01's proposal here.

🎀👀🎀 C+ reviewed.

[melvin-bot]

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

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

@akinwale 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.86-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: App does not trigger required field validation when no state is selected #55197

If no regressions arise, payment will be issued on 2025-01-24. 🎊

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

• @akinwale requires payment through NewDot Manual Requests
• @truph01 requires payment automatic offer (Contributor)

[melvin-bot]

@akinwale @anmurali @akinwale The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[akinwale]

BugZero Checklist:

• [@akinwale] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [@akinwale] 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: N/A

• [@akinwale] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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

• [@akinwale] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Test:

1. Launch Expensify.
2. Navigate to the settings of a workspace that does not have a bank account (or create a new workspace).
3. Navigate to Workflows (required to be enabled for a new workspace in More features).
4. Click Connect bank account and select Connect manually.
5. Continue the process until address input is required.
6. Select the State field.
7. Navigate back without making a selection.
8. Verify that required field validation is triggered on the State field, and that the corresponding error message is displayed.

Do we agree 👍 or 👎?

[melvin-bot]

@akinwale, @flodnv, @anmurali, @truph01 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[anmurali]

Payment summary

• @akinwale approved $250 through NewDot Manual Requests
• @truph01 approved $250 via automatic offer (Contributor)

[JmillsExpensify]

$250 approved for @akinwale

[melvin-bot]

@akinwale, @flodnv, @anmurali, @truph01 Huh... This is 4 days overdue. Who can take care of this?