[$250] Workspace - "This field is required" field validation error triggers automatically

[jponikarchuk]

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: 9.1.30-0
Reproducible in staging?: Yes
Reproducible in production?: Unable to check in Production, it asks to update the currency to USD.
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: #56931
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 10 / Chrome, macOS Sequoia 15.3
App Component: Workspace Settings

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with a new Expensifail account
3. Create a workspace with "CAD" default currency
4. Navigate to Workspace settings - Workflows - Connect bank account - Connect manually
5. Click on the "Confirm" button
6. Input any formally valid data to all of the fields
7. Click on the "Next" button
8. Input any formally valid data to all of the fields
9. Click on the "Next" button
10. Click on the "Confirm" button

Expected Result:

"This field is required" field validation error should only trigger if the user clicks the "Next" button while the field is empty.

Actual Result:

"This field is required" field validation error triggers automatically.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914361282087619015
• Upwork Job ID: 1914361282087619015
• Last Price Increase: 2025-04-21

[melvin-bot]

Triggered auto assignment to @sakluger (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.

[nyomanjyotisa]

Proposal

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

Workspace - "This field is required" field validation error triggers automatically

What is the root cause of that problem?

onBlur executed when autoFocus set to true on the single field form

and onBlur trigger the onValidate

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

add shouldValidateOnBlur={false} here

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

None

What alternative solutions did you explore? (Optional)

None

[melvin-bot]

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

[melvin-bot]

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

[nkdengineer]

Proposal

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

"This field is required" field validation error triggers automatically.

What is the root cause of that problem?

When the focus trap is active, active element is the input and it's blurred here that causes the error appears

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Line 45 in aab7aeb

(document?.activeElement as HTMLElement)?.blur();

After that the input is focused

App/src/components/TextInput/BaseTextInput/implementation/index.tsx

Line 126 in aab7aeb

input.current.focus();

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

If the focused element is input we shouldn't blur this.

onActivate: () => {
    const activeElement = document?.activeElement as HTMLElement;
    if ((activeElement?.nodeName === 'INPUT' || activeElement?.nodeName === 'TEXTAREA')) {
        return;
    }
    activeElement?.blur();
},

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Line 45 in aab7aeb

(document?.activeElement as HTMLElement)?.blur();

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

UI bug

What alternative solutions did you explore? (Optional)

We pass disabled validate on blur by passing shouldValidateOnBlur as false here

App/src/components/SubStepForms/SingleFieldStep.tsx

Line 85 in aab7aeb

<FormProvider

Result

Screen.Recording.2025-04-22.at.00.20.30.mov

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.

[github-actions]

⚠️ Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).