[HOLD for payment 2023-06-30] [Hold 18658][$1000] When only link is added in header text, app adds extra padding above link which has cursor as pointer

[kavimuru]

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:

1. Open the app
2. Open any report
3. Send any link as header text. eg: # google.com
4. Hover slightly over the link and observe the pointer is cursor i.e. pointer is clickable.
5. Click in that area and observe that it does nothing

Expected Result:

App should only keep the link area clickable like does for normal text message and header message with both text and link

Actual Result:

App keeps area above link clickable but does nothing on click when only link is added in header text

Workaround:

unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.0
Reproducible in staging?: y
Reproducible in production?: y
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

Recording.250.mp4

clickable.area.over.header.text.link.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1681575226770749

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0143b139f54244d059
• Upwork Job ID: 1648636657245667328
• Last Price Increase: 2023-05-10

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @amyevans (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[flaviadefaria]

External label added, waiting for proposals.

[MahmudjonToraqulov]

Proposal

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

When only link is added in header text, app adds extra padding above link which has cursor as pointer

What is the root cause of that problem?

display: inline should be removed from h1 's third child.

RULE: display: inline -> It just takes up the space such an element would normally take. Because of this, you can't set the width and height of an element that has a display of inline , becuase it does not take up the whole screen width.

In that case The element shouldn't be like rule

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

Just remove display: inline from the element. More in the video.

What alternative solutions did you explore? (Optional)

N/A

Result

screen-capture.22.webm

[alexxxwork]

Proposal

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

When h1 applied to link there's an area above with pointer cursor.
App should only keep the link area clickable like does for normal text message and header message with both text and link

What is the root cause of that problem?

The root cause is here:

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Line 68 in c144663

<Tooltip containerStyles={[styles.dInline]} text={props.href}>

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

We could just delete containerStyles prop

[dukenv0307]

Proposal

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

When only link is added in header text, app adds extra padding above link which has cursor as pointer

What is the root cause of that problem?

containerStyles with style display: inline is apply to container of text. When set display: inline, line-height: 20px doesn't work so that div that wrap text have height more than 20px. So that height of it is more than normal. In addition, h1 tag has contentModel is block, so that fontSize, fontFamily or other similar that is invalid for it self, it is applied for children of h1. In web, h1 has default fontSize is 2em when children has height higher it set width to 2em that is higher than 20px

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Line 68 in c144663

<Tooltip containerStyles={[styles.dInline]} text={props.href}>

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

We should remove containerStyles in this

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Line 68 in c144663

<Tooltip containerStyles={[styles.dInline]} text={props.href}>

What alternative solutions did you explore? (Optional)

We could create new h1 tag like this: h1: defaultHTMLElementModels.div.extend({}), in customHTMLElementModels to change h1 to div when it is renderer and prevent the default style of h1 in the browser.
We also could create a custom render for h1 tag to prevent the default style.

[alitoshmatov]

Proposal

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

When only link is added in header text, app adds extra padding above link which has cursor as pointer

What is the root cause of that problem?

We are wrapping anchor element with tooltip and pressable.They are getting their height based on parent element styling because they are inline element

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Lines 52 to 88 in 4607dcb

	<PressableWithSecondaryInteraction
	inline
	onSecondaryInteraction={
	(event) => {
	ReportActionContextMenu.showContextMenu(
	Str.isValidEmailMarkdown(props.displayName) ? 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}
	>
	<Tooltip containerStyles={[styles.dInline]} text={props.href}>
	<Text
	ref={el => linkRef = el}
	style={StyleSheet.flatten([props.style, defaultTextStyle])}
	accessibilityRole="link"
	hrefAttrs={{
	rel: props.rel,
	target: 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>

Since we are supplying react-native-render-html with custom component for anchor element, it is just passing the styles to child element. It is not applying styles fully to the header element, and omitting some fields. Even though we have declared styles for h1 element

App/src/styles/styles.js

Lines 134 to 137 in 4607dcb

	h1: {
	fontSize: variables.fontSizeLarge,
	marginBottom: 8,
	},

font-size is not applied to h1 itself and rather supplied to child element renderer. I think this is explained on their doc here
https://meliorence.github.io/react-native-render-html/docs/flow/css-processing

Thus h1 element is defaulting to browser default styles and letting child elements to expand

The issue

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

We should also apply styles to top level component of our custom anchor component, specifically apply styles to pressable component here

App/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

Lines 52 to 55 in 4607dcb

	<PressableWithSecondaryInteraction
	inline
	onSecondaryInteraction={
	(event) => {

What alternative solutions did you explore? (Optional)

[flaviadefaria]

@0xmiroslav any thoughts on the proposal above?

[flaviadefaria]

@0xmiroslav friendly bump here...

[0xmiros]

@MahmudjonToraqulov thanks for your proposal. I am not sure where you're proposing to remove display: inline. Can you please share permal link?

[amyevans]

Fixed up the title/labels manually

[flaviadefaria]

So just to confirm, we're still waiting to see if the reverted PR fixes this issue before we make a decision, right?

[amyevans]

So just to confirm, we're still waiting to see if the reverted PR fixes this issue before we make a decision, right?

After the revert, a new PR was put up (#20996), so yes we're waiting to see if this PR fixes the issue.

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

• fix offline deleted heading link style and link padding #20996

If no regressions arise, payment will be issued on 2023-06-30. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

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:

• [@0xmiroslav] The PR that introduced the bug has been identified. Link to the PR:
• [@0xmiroslav] 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:
• [@0xmiroslav] 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:
• [@0xmiroslav] Determine if we should create a regression test for this bug.
• [@0xmiroslav] 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.
• [@flaviadefaria] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[flaviadefaria]

Waiting for @0xmiroslav to fill out the checklist above so that I can process payment.

[flaviadefaria]

Friendly bump @0xmiroslav!

[flaviadefaria]

Bumped @0xmiroslav in Slack as I think he has missed my previous bumps here.

[0xmiros]

Shall I or @mollfpr fill checklist? As PR was reviewed by @mollfpr

[flaviadefaria]

Ok so it looks like we're issuing the following payments:

@dhanashree-sawant - $250
@0xmiroslav - $1000 - $500 from regression = $500

[flaviadefaria]

Offers sent!

[flaviadefaria]

Paid!