[HOLD for payment 2024-11-26] [$250] Company cards - Error appears after tapping the explanation link for the first time

[lanitochka17]

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.0.58-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #51575

Action Performed:

1. Open New Expensify staging hybrid app.
2. Create a workspace and enable Company cards feature.
3. Go to Company cards page.
4. Tap Add company cards button to start add feed flow.
5. Select Amex provider (or Visa/Mastercard providers in Others). Tap Next 3 times.
6. On the details screen, below input field tap the explanation link.

Expected Result:

After tapping the explanation link under the input field user is redirected to the relevant web page

Actual Result:

Error appears under the input field "This field is required" after tapping the explanation link for the first time. User is successfully redirected to the relevant page after tapping the link second time

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6656970_1730926601363.Company_cards.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021856152080745182402
• Upwork Job ID: 1856152080745182402
• Last Price Increase: 2024-11-12
• Automatic offers:
• DylanDylann | Reviewer | 104860234

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-11-07 03:52:51 UTC.

Proposal

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

Validation error appears when pressing the link in company card step.

What is the root cause of that problem?

The validation shows every time the input is blurred. When we press the text link, the text input blurs. This doesn't happen in web because by default, we preventDefault it.

App/src/components/TextLink.tsx

Line 35 in afa7b33

function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...rest}: TextLinkProps, ref: ForwardedRef<RNText>) {

In native, pressing a button normally doesn't blur the active input. But in our case, the page is wrapped with a ScrollView with no keyboardShouldPersistTaps. So, if we tap inside the scroll view, then it will close the keyboard.

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

Lines 175 to 208 in afa7b33

	<ScrollView
	style={styles.pt0}
	contentContainerStyle={styles.flexGrow1}
	>
	<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>
	{!!feedProvider && !isStripeFeedProvider ? translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.title`) : ''}
	</Text>
	<FormProvider
	formID={ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM}
	submitButtonText={translate('common.submit')}
	onSubmit={submit}
	validate={validate}
	style={[styles.mh5, styles.flexGrow1]}
	enabledWhenOffline
	>
	{renderInputs()}
	{!!feedProvider && !isStripeFeedProvider && (
	<View style={[styles.flexRow, styles.alignItemsCenter]}>
	<Icon
	src={Expensicons.QuestionMark}
	width={variables.iconSizeExtraSmall}
	height={variables.iconSizeExtraSmall}
	fill={theme.icon}
	/>
	<TextLink
	style={[styles.label, styles.textLineHeightNormal, styles.ml2]}
	href={CONST.COMPANY_CARDS_HELP}
	>
	{translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.helpLabel`)}
	</TextLink>
	</View>
	)}
	</FormProvider>
	</ScrollView>

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

We can add keyboardShouldPersistTaps='handled' to the ScrollView.

OR

We can just remove the ScrollView and move the Text inside FormProvider because FormProvider already uses a ScrollView which already has keyboardShouldPersistTaps="handled".

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

Lines 175 to 190 in afa7b33

	<ScrollView
	style={styles.pt0}
	contentContainerStyle={styles.flexGrow1}
	>
	<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>
	{!!feedProvider && !isStripeFeedProvider ? translate(`workspace.companyCards.addNewCard.feedDetails.${feedProvider}.title`) : ''}
	</Text>
	<FormProvider
	formID={ONYXKEYS.FORMS.ADD_NEW_CARD_FEED_FORM}
	submitButtonText={translate('common.submit')}
	onSubmit={submit}
	validate={validate}
	style={[styles.mh5, styles.flexGrow1]}
	enabledWhenOffline
	>
	{renderInputs()}

App/src/components/Form/FormWrapper.tsx

Lines 163 to 177 in afa7b33

	<ScrollViewWithContext
	style={[styles.w100, styles.flex1]}
	contentContainerStyle={styles.flexGrow1}
	keyboardShouldPersistTaps="handled"
	ref={formRef}
	>
	{scrollViewContent(safeAreaPaddingBottomStyle)}
	</ScrollViewWithContext>
	) : (
	<ScrollView
	style={[styles.w100, styles.flex1]}
	contentContainerStyle={styles.flexGrow1}
	keyboardShouldPersistTaps="handled"
	ref={formRef}
	>

(we need to remove the padding from text because FormProvider already has the horizontal margin.)

OR

Don't use the ScrollView (remove it).

[trjExpensify]

Let's get eyes from @mountiny @allgandalf @DylanDylann on the approach here. What technical approach do we take on native for other links in forms, like a terms link in a RHP form?

[mountiny]

Nice one QA. @allgandalf @DylanDylann which one of you wants to take this one and review the proposals so its in line with how we handle it elsewhere in the app?

[DylanDylann]

I can help on this issue

[trjExpensify]

Assigned! Sending External then.

[melvin-bot]

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

[melvin-bot]

Current assignee @DylanDylann is eligible for the External assigner, not assigning anyone new.

[DylanDylann]

I can't reproduce this bug. @bernhardoj Could you reproduce this bug?

Screen.Recording.2024-11-12.at.09.27.22.mov

[allgandalf]

I was able to reproduce this, should i take over @DylanDylann ?

[DylanDylann]

Ahh I missed this step

Select Amex provider (or Visa/Mastercard providers in Others). Tap Next 3 times.

We need enable the keyboard on simulator to reproduce this bug

[DylanDylann]

@bernhardoj's proposal looks good to me. I prefer the second solution

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

Current assignee @mountiny is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @DylanDylann 🎉 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

[bernhardoj]

PR is ready

cc: @DylanDylann

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

• Fix pressing the text link causes the validation error to show up #52405

If no regressions arise, payment will be issued on 2024-11-26. 🎊

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

• @bernhardoj requires payment through NewDot Manual Requests
• @DylanDylann requires payment automatic offer (Reviewer)

[melvin-bot]

@DylanDylann @trjExpensify @DylanDylann 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]

[mountiny]

$250 to @bernhardoj and $125 to @DylanDylann

For Dylan the payment is less as he is working on this as a project and we agreed for lower base price

[trjExpensify]

Cool, sounds good! Payment summary as follows:

• $125 to @DylanDylann for the C+ review (paid!)
• $250 to @bernhardoj for the fix (go ahead and request!)

@DylanDylann can we get the checklist, please? I believe regression tests will be added centrally for the project, but it would be good to identify where this error was missed to give the author(s) a heads up.

[DylanDylann]

BugZero Checklist:

• [Contributor] 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
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

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

• [Contributor] 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: Feat: Add company card feed flow #48119 (comment)

• [Contributor] 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:

• [Contributor] 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. Open any workspace and enable Company cards feature
2. Go to Company cards page
3. Tap Add company cards button to start add feed flow
4. Select Amex provider. Tap Next 3 times
5. On the details screen, below the input field tap the explanation link
6. Verify no error and you are redirected to help web page

Do we agree 👍 or 👎

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj

[trjExpensify]

Great, thanks. Closing!