[Due for payment 2025-06-11] [$250] mWeb - In "What bank issue these card", tapping next with blank field cursor lost and keypad closed

[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: V9.1.41-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/6062468
Email or phone of affected tester (no customers): Applausetester sivappa1@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Redminote note 10s android 13
App Component: Workspace Settings

Action Performed:

1. Launch app in both mweb and android
2. Go to Workspace settings
3. Tap company card
4. Scroll and see add card can be seen behind navigation bar
5. Tap add cards - other - master card
6. Tap next

Expected Result:

In "What bank issue these card" , tapping next with blank field cursor must not be lost and keypad must not be closed in mweb like in android.

In android, add card musnt be transparently seen behind navigation bar like mweb.

Actual Result:

In "What bank issue these card" , tapping next with blank field cursor lost and keypad closed in mweb but in android shown.

In android, add card can be seen behind navigation bar.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• 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/~021920900329569705356
• Upwork Job ID: 1920900329569705356
• Last Price Increase: 2025-05-16
• Automatic offers:
• truph01 | Contributor | 107392910

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[nkdengineer]

Proposal

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

In "What bank issue these card" , tapping next with blank field cursor lost and keypad closed in mweb but in android shown.

What is the root cause of that problem?

We don't call keyboard dismiss if any errors are found here

App/src/components/Form/FormProvider.tsx

Lines 223 to 226 in eea5fe6

	// Validate form and return early if any errors are found
	if (!isEmptyObject(onValidate(trimmedStringValues))) {
	return;
	}

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

We should dismiss the keyboard first like we did before submitting form here

            // Validate form and return early if any errors are found
            if (!isEmptyObject(onValidate(trimmedStringValues))) {
                KeyboardUtils.dismiss();
                return;
            }

App/src/components/Form/FormProvider.tsx

Lines 223 to 226 in eea5fe6

	// Validate form and return early if any errors are found
	if (!isEmptyObject(onValidate(trimmedStringValues))) {
	return;
	}

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)

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.

[dmkt9]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-07 16:38:37 UTC.

Proposal

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

In the "What bank issues these cards" step, tapping "Next" with a blank field causes cursor loss and keyboard closure in mobile web, while Android retains focus.

What is the root cause of that problem?

1. React Native (Android/iOS) Behavior:

• Components like TextInput don't automatically lose focus on form submission unless manually handled (using blur() or keyboard.dismiss()).
• Native component implementation differs from web DOM behavior.

2. Mobile Web Behavior:

• Form submission triggers automatic re-render and input focus loss (especially with validation errors).
• Default DOM behavior for failed form submissions.

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

• Ensure TextInput re-focuses when validation errors occur:
• Capture Input ref

const {inputCallbackRef, inputRef} = useAutoFocusInput();

• Check for errors and refocus
  

  App/src/pages/workspace/companyCards/addNew/CardNameStep.tsx

  Line 32 in eea5fe6

  return errors;

if (Object.values(errors).length > 0) {
    inputRef.current?.focus();
}

• Add form props to control validation occurs only after submit button is pressed:
  

  App/src/pages/workspace/companyCards/addNew/CardNameStep.tsx

  Line 61 in eea5fe6

  <FormProvider

shouldValidateOnBlur={false}

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

N/A

What alternative solutions did you explore? (Optional)

1. Add a ref to store the last focused inputID:
   

   App/src/components/Form/FormProvider.tsx

   Line 121 in 051e86d

   const {setIsBlurred} = useInputBlurContext();

const lastInputIDFocusedRef = useRef<string>();

2. Add event handling:
   

   App/src/components/Form/FormProvider.tsx

   Line 373 in 051e86d

   onBlur: (event) => {

onFocus: ()=>{
    lastInputIDFocusedRef.current = inputID;
},

App/src/components/Form/FormProvider.tsx

Line 390 in 051e86d

setTouchedInput(inputID);

lastInputIDFocusedRef.current = undefined;

3. Validate and refocus if the currently focused input has errors:
   

   App/src/components/Form/FormProvider.tsx

   Line 227 in 051e86d

   if (!isEmptyObject(onValidate(trimmedStringValues))) {

const validateErrors = onValidate(trimmedStringValues);
if (!isEmptyObject(validateErrors)) {
    const lastInputID = lastInputIDFocusedRef.current;
    if(lastInputID && lastInputID in validateErrors) {
        setTimeout(()=>{
            inputRefs.current[lastInputID]?.current?.focus?.();
        }, VALIDATE_DELAY);
    }
    return;
}

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.

[truph01]

Proposal

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

• mWeb - In "What bank issue these card", tapping next with blank field cursor lost and keypad closed

What is the root cause of that problem?

• On mWeb, clicking any button causes the currently focused input to blur, which results in the keyboard closing and the cursor disappearing. It is default behavior.

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

• In the FormAlertWithSubmitButton component, we should introduce a mechanism to optionally prevent the default focus-blurring behavior on mouse down.

• Specifically, we can modify the following lines:
  

  App/src/components/FormAlertWithSubmitButton.tsx

  Line 124 in 1de2c6d

  <Button

  
  

  App/src/components/FormAlertWithSubmitButton.tsx

  Line 135 in 1de2c6d

  <Button

• Add the following prop-based logic to both buttons:

onMouseDown={shouldPreventBlur ? (e) => e.preventDefault() : undefined}

• The new shouldPreventBlur prop should default to false to maintain backward compatibility.

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)

[melvin-bot]

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

[melvin-bot]

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