[HOLD for payment 2023-08-07] [$1000] Chat - Word that follows after the multiline hyperlink is located between multiline hyperlink

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Go to staging.new.expensify.com
Go to any conversation
Type the following message
[Multiline
text}(link) hello
Send the message

Expected Result:

The word 'hello' after the multiline hyperlink is located after the multiline hyperlink

Actual Result:

The word 'hello' after the multiline hyperlink is located in the middle of multiline hyperlink

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.37.3

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6118738_Screen_Recording_20230707_013204_Chrome.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01ad0d167a3f25ee3b
Upwork Job ID: 1678480571176464384
Automatic offers:

aimane-chnaif | Reviewer | 25731139
| | 0

@MitchExpensify

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

Proposal

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

Currently, having a multiline link and text next to it will show the text at the first line of the link. This only happen in Web/Desktop.

What is the root cause of that problem?

The link rendered in the chat is a BaseAnchorForCommentsOnly component which wraps the anchor text with PressableWithSecondaryInteraction.

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Lines 56 to 91 in bf94b78

    
           <PressableWithSecondaryInteraction 
        
               inline 
        
               style={[styles.cursorDefault, StyleUtils.getFontSizeStyle(props.style.fontSize)]} 
        
               onSecondaryInteraction={(event) => { 
        
                   ReportActionContextMenu.showContextMenu( 
        
                       isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK, 
        
                       event, 
        
                       props.href, 
        
                       lodashGet(linkRef, 'current'), 
        
                   ); 
        
               }} 
        
               onPress={linkProps.onPress} 
        
               onPressIn={props.onPressIn} 
        
               onPressOut={props.onPressOut} 
        
               accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} 
        
               accessibilityLabel={props.href} 
        
           > 
        
               <Tooltip text={props.href}> 
        
                   <Text 
        
                       ref={(el) => (linkRef = el)} 
        
                       style={StyleSheet.flatten([props.style, defaultTextStyle])} 
        
                       accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} 
        
                       hrefAttrs={{ 
        
                           rel: props.rel, 
        
                           target: isEmail ? '_self' : props.target, 
        
                       }} 
        
                       href={linkProps.href} 
        
                       // Add testID so it gets selected as an anchor tag by SelectionScraper 
        
                       testID="a" 
        
                       // eslint-disable-next-line react/jsx-props-no-spreading 
        
                       {...rest} 
        
                   > 
        
                       {props.children} 
        
                   </Text> 
        
               </Tooltip> 
        
           </PressableWithSecondaryInteraction>

If we remove PressableWithSecondaryInteraction, the problem will be gone. Why? Let's take a look at an example

[Multi
link](google.com) test

This text will render this HTML:

The link itself is wrapped with 2 div, while the text test is the span at the bottom. The 2 div comes from PressableWithSecondaryInteraction. PressableWithSecondaryInteraction uses PressableWithFeedback which is composed of OpactiyView (1st div) and GenericPressable (2nd div).

App/src/components/Pressable/PressableWithFeedback.js

Lines 48 to 53 in bf94b78

    
           <OpacityView 
        
               shouldDim={Boolean(!isDisabled && (isPressed || isHovered))} 
        
               dimmingValue={isPressed ? props.pressDimmingValue : props.hoverDimmingValue} 
        
               style={props.wrapperStyle} 
        
           > 
        
               <GenericPressable

div will have a block display by default, but actually, we already apply an inline props to PressableWithSecondaryInteraction.

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Lines 56 to 57 in bf94b78

    
           <PressableWithSecondaryInteraction 
        
               inline

inline props will set the display inline style to PressableWithFeedback.

App/src/components/PressableWithSecondaryInteraction/index.js

Line 89 in bf94b78

    
           style={(state) => [StyleUtils.parseStyleFromFunction(this.props.style, state), ...[this.props.inline && styles.dInline]]}

The problem is, the style is only applied to GenericPressable, which is the 2nd div. The 1st div (OpacityView) somehow has an inline-flex style (if we remove the inline props, both div will have inline-flex display).

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

To apply the inline style to the 1st div (OpacityView), we should also set the style to wrapperStyle.

App/src/components/PressableWithSecondaryInteraction/index.js

Lines 79 to 80 in bf94b78

    
           <PressableWithFeedback 
        
               wrapperStyle={StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [])}

Reproduced and do not see a dupe of this

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

@MitchExpensify

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

@aimane-chnaif

Not overdue, waiting for the payment. @aimane-chnaif can you please fill the BZ steps, thanks.

@aimane-chnaif

Paid @aimane-chnaif

Just waiting on @bernhardoj to accept the offer to close this one out post payment

@MitchExpensify

@MitchExpensify Accepted

@aimane-chnaif

Thanks, Paid! Just waiting on Upwork to stop being buggy so I can end the contract.

Reminder on the BZ steps here @aimane-chnaif

@aimane-chnaif

Contracts ended! Friendly bump on the BZ steps #22362 (comment) @aimane-chnaif - Thanks! Lets get this closed out

@aimane-chnaif

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@aimane-chnaif] The PR that introduced the bug has been identified. Link to the PR: 17047 migrate PressableWithSecondaryInteraction to PressableWithFeedback component #20251

[@aimane-chnaif] 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: https://github.com/Expensify/App/pull/20251/files#r1292628847

[@aimane-chnaif] A discussion in #expensify-bugs 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: N/A

[@aimane-chnaif] Determine if we should create a regression test for this bug.

[@aimane-chnaif] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

As this came from pressable migration refactor, I don't think regression test is needed

@aimane-chnaif

Awesome, thanks @aimane-chnaif

Navigation Menu

Repository navigation

[HOLD for payment 2023-08-07] [$1000] Chat - Word that follows after the multiline hyperlink is located between multiline hyperlink #22362

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

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?

41 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<PressableWithSecondaryInteraction
	inline
	style={[styles.cursorDefault, StyleUtils.getFontSizeStyle(props.style.fontSize)]}
	onSecondaryInteraction={(event) => {
	ReportActionContextMenu.showContextMenu(
	isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
	event,
	props.href,
	lodashGet(linkRef, 'current'),
	);
	}}
	onPress={linkProps.onPress}
	onPressIn={props.onPressIn}
	onPressOut={props.onPressOut}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
	accessibilityLabel={props.href}
	>
	<Tooltip text={props.href}>
	<Text
	ref={(el) => (linkRef = el)}
	style={StyleSheet.flatten([props.style, defaultTextStyle])}
	accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
	hrefAttrs={{
	rel: props.rel,
	target: isEmail ? '_self' : props.target,
	}}
	href={linkProps.href}
	// Add testID so it gets selected as an anchor tag by SelectionScraper
	testID="a"
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...rest}
	>
	{props.children}
	</Text>
	</Tooltip>
	</PressableWithSecondaryInteraction>

	<OpacityView
	shouldDim={Boolean(!isDisabled && (isPressed \|\| isHovered))}
	dimmingValue={isPressed ? props.pressDimmingValue : props.hoverDimmingValue}
	style={props.wrapperStyle}
	>
	<GenericPressable

	<PressableWithFeedback
	wrapperStyle={StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [])}

[HOLD for payment 2023-08-07] [$1000] Chat - Word that follows after the multiline hyperlink is located between multiline hyperlink #22362

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Jul 6, 2023

melvin-bot commented on Jul 6, 2023

Bug0 Triage Checklist (Main S/O)

bernhardoj commented on Jul 7, 2023

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?

MitchExpensify commented on Jul 10, 2023

melvin-bot commented on Jul 10, 2023

melvin-bot commented on Jul 10, 2023

41 remaining items

techievivek commented on Aug 7, 2023

MitchExpensify commented on Aug 7, 2023

bernhardoj commented on Aug 7, 2023

MitchExpensify commented on Aug 7, 2023

MitchExpensify commented on Aug 9, 2023

aimane-chnaif commented on Aug 13, 2023

MitchExpensify commented on Aug 13, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions