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

@trjExpensify

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:

Open New Expensify staging hybrid app.
Create a workspace and enable Company cards feature.
Go to Company cards page.
Tap Add company cards button to start add feed flow.
Select Amex provider (or Visa/Mastercard providers in Others). Tap Next 3 times.
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?

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

@trjExpensify

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.

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

@mountiny

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?

@allgandalf

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?

I can help on this issue

Assigned! Sending External then.

Reviewing label has been removed, please complete the "BugZero Checklist".

@bernhardoj

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)

@DylanDylann

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

@bernhardoj

$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

@DylanDylann

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.

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:

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

Open any workspace and enable Company cards feature
Go to Company cards page
Tap Add company cards button to start add feed flow
Select Amex provider. Tap Next 3 times
On the details screen, below the input field tap the explanation link
Verify no error and you are redirected to help web page

Do we agree 👍 or 👎

Requested in ND.

@bernhardoj

$250 approved for @bernhardoj

Great, thanks. Closing!

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

21 remaining items

BugZero Checklist:

Regression Test Proposal

Test:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	<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}
	>

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 6, 2024

bernhardoj commented on Nov 7, 2024

Proposal

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

What is the root cause of that problem?

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

trjExpensify commented on Nov 12, 2024

mountiny commented on Nov 12, 2024

DylanDylann commented on Nov 12, 2024

trjExpensify commented on Nov 12, 2024

21 remaining items

melvin-bot commented on Nov 19, 2024

melvin-bot commented on Nov 19, 2024

melvin-bot commented on Nov 19, 2024

mountiny commented on Nov 20, 2024

trjExpensify commented on Nov 26, 2024

DylanDylann commented on Nov 27, 2024

BugZero Checklist:

Regression Test Proposal

Test:

bernhardoj commented on Nov 27, 2024

JmillsExpensify commented on Nov 27, 2024

trjExpensify commented on Nov 27, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions