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

Issue Owner

Current Issue Owner: @akinwale

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