[$1000] Confirm Task menu item is cut off on touch

[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. Press the Global + (FAB) button
2. Select Assign Task
3. Complete the field and press Next
4. Press Assignee and select any user
5. Press down the Assignee/Share somewhere
6. Notice the menu is cut off

Expected Result:

The menu should stay fully visible

Actual Result:

The menu getting cut off

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Screen.Recording.2023-05-10.at.21.55.07.mov

Expensify/Expensify Issue URL:
Issue reported by: @bernhardoj
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1683727180608179

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a0d40385abc3107d
• Upwork Job ID: 1656605435245920256
• Last Price Increase: 2023-05-11

[melvin-bot]

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

[melvin-bot]

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

[PrashantMangukiya]

Proposal

Posting proposal early as per new guidelines

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

Confirm Task menu item is cut off on touch (if it consist icon, desc content) for native android etc.

What is the root cause of that problem?

Task menu item rendered via TaskSelectorLink component as shown below:

App/src/components/TaskSelectorLink.js

Lines 50 to 60 in 2fca384

	const TaskSelectorLink = (props) => {
	const shortenedText = props.text.length > 35 ? `${props.text.substring(0, 35)}...` : props.text;
	const displayNameStyle = StyleUtils.combineStyles(styles.optionDisplayName, styles.pre);
	const alternateTextStyle = StyleUtils.combineStyles(styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting, styles.pre);
	const linkBottomMargin = props.icons.length !== 0 ? styles.mb6 : styles.mb2;
	return (
	<TouchableOpacity
	style={[styles.flexRow, styles.taskSelectorLink, linkBottomMargin]}
	onPress={props.onPress}
	disabled={props.disabled}
	>

We can see at line 57 it is using styles.taskSelectorLink that consist below code.

App/src/styles/styles.js

Lines 1685 to 1692 in 2fca384

	taskSelectorLink: {
	alignSelf: 'center',
	height: 42,
	width: '100%',
	padding: 6,
	margin: 3,
	backgroundColor: themeColors.transparent,
	},

We can see height: 42 set at line 1687, so touchable opacity has fix height, So when we touch it will show area with height 42 and other area cut off. We can see it from below debug image with yellow line indicates touchable opacity area. So if we set minHeight: 42 it will generate proper opacity height.

height: 42	minHeight: 42

So This is the root cause of the problem i.e. when we touch it will cut off the touch.

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

Within src/styles/styles.js we have to change height to minHeight as shown code below.

taskSelectorLink: {
    ...
    //height: 42, // *** OLD CODE ***
    minHeight: 42, // *** NEW CODE ***
    ...
},

As we set minHeight so no need to set linkBottomMargin value conditionally, so we can remove it and set styles.mb2 for TouchableOpacity as shown below:

//const linkBottomMargin = props.icons.length !== 0 ? styles.mb6 : styles.mb2; // *** REMOVE THIS ***

<TouchableOpacity
    //style={[styles.flexRow, styles.taskSelectorLink, linkBottomMargin]} // *** OLD CODE ***
    style={[styles.flexRow, styles.taskSelectorLink, styles.mb2]} // *** NEW CODE ***
    ....
>

This will solve the issue and work as expected on all platform as shown in video for iOS and Android.

What alternative solutions did you explore? (Optional)

None

Results

Android

Android.mp4

iOS

iOS.mov

[hungvu193]

Proposal

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

Confirm Task menu item is cut off on touch

What is the root cause of that problem?

We are fixing height for TaskSelectorLink, but in difference devices for example my Pixel 6 emulator, the content of the TaskSelectorLink is overlap the height of 42, that's why when we long press the field the content is cut off.

App/src/styles/styles.js

Line 1687 in 1d951e6

height: 42,

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

Because we are allowing fontScale, that's bad idea to fix the height of a field, in order to fix this problem, we will need to remove the height of TaskSelectorLink.

    taskSelectorLink: {
        alignSelf: 'center',
       // remove the height of TaskSelectorLink
        // height: 42,
        width: '100%',
        padding: 6,
        margin: 3,
        backgroundColor: themeColors.transparent,
    },

We can also replace the TouchableOpacity with PressableWithFeedback to prevent double click bugs (#18122).
Since we don't limit the height of TaskSelectorLink we will also need to update the margin of it in here:

App/src/components/TaskSelectorLink.js

Line 54 in 1d951e6

const linkBottomMargin = props.icons.length !== 0 ? styles.mb6 : styles.mb2;

and here:

App/src/pages/tasks/NewTaskPage.js

Lines 162 to 195 in 1d951e6

	<View style={styles.mb5}>
	<TaskSelectorLink
	text={props.task.title}
	onPress={() => Navigation.navigate(ROUTES.NEW_TASK_TITLE)}
	label="newTaskPage.title"
	/>
	</View>
	<View style={styles.mb5}>
	<TaskSelectorLink
	text={props.task.description}
	onPress={() => Navigation.navigate(ROUTES.NEW_TASK_DESCRIPTION)}
	label="newTaskPage.description"
	/>
	</View>
	<View style={styles.mb5}>
	<TaskSelectorLink
	icons={assignee.icons}
	text={assignee.displayName}
	alternateText={assignee.subtitle}
	onPress={() => Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE)}
	label="newTaskPage.assignee"
	/>
	</View>
	<View style={styles.mb5}>
	<TaskSelectorLink
	icons={shareDestination.icons}
	text={shareDestination.displayName}
	alternateText={shareDestination.subtitle}
	onPress={() => Navigation.navigate(ROUTES.NEW_TASK_SHARE_DESTINATION)}
	label="newTaskPage.shareSomewhere"
	isShareDestination
	disabled={Boolean(props.task.parentReportID)}
	/>
	</View>

What alternative solutions did you explore? (Optional)

None

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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