[$250] Web - IOU - Swiping with the mouse causes text to be selected and tabs quickly switching

[IuliiaHerets]

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: v9.0.22-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp #47485
Email or phone of affected tester (no customers):
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with any account
3. Navigate to FAB - Submit expense
4. Switch between Manual, Scan and Distance tabs with the click, hold and swipe method

Expected Result:

I should be able to switch between tabs with the mouse smootly. Text shouldn't be selected and quick switching shouldn't happen.

Actual Result:

Swiping with the mouse causes text to be selected and tabs quickly switching back and forth.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6576219_1724086853731.bandicam_2024-08-19_18-52-35-328.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c4f519f87f7ca5c0
• Upwork Job ID: 1825784474327119736
• Last Price Increase: 2024-08-20
• Automatic offers:
• ZhenjaHorbach | Reviewer | 103624416
• Krishna2323 | Contributor | 103624417

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #vip-vsb

[IuliiaHerets]

@RachCHopkins FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[daledah]

Proposal

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

Swiping with the mouse causes text to be selected and tabs quickly switching back and forth.

What is the root cause of that problem?

When the user clicks on the space between the header and the bottom, they will select the header because we are currently setting paddingBottom = 12px here

App/src/components/TabSelector/TabSelector.tsx

Line 91 in c7a8d12

<View style={styles.tabSelector}>

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

We should update that space as a part of the bottom part.

1. Remove paddingBottom here

App/src/styles/index.ts

Line 4250 in c7a8d12

paddingBottom: 12,

2. Update marginTop of bottom part by adding styles.mt3 in here

App/src/libs/Navigation/OnyxTabNavigator.tsx

Lines 168 to 173 in c7a8d12

	<FocusTrapContainerElement
	onContainerElementChanged={handleContainerElementChanged}
	style={[styles.w100, styles.h100]}
	>
	{children}
	</FocusTrapContainerElement>

3. We also have the same problem with start chat page so i think we can fix it together

What alternative solutions did you explore? (Optional)

NA

result.mov

[Krishna2323]

Proposal

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

Web - IOU - Swiping with the mouse causes text to be selected and tabs quickly switching

What is the root cause of that problem?

The text is selectable, so when we try to drag the text is selected.

App/src/components/TabSelector/TabSelector.tsx

Lines 91 to 93 in c7a8d12

	<View style={styles.tabSelector}>
	{state.routes.map((route, index) => {
	const activeOpacity = getOpacity(position, state.routes.length, index, true, affectedAnimatedTabs);

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

We should add style={styles.userSelectNone} and dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} to the TabSelector or it can be added to TabSelectorItem here.

What alternative solutions did you explore? (Optional)

[RachCHopkins]

Wow, how cool, I had no idea this was a thing! There is definitely a technique right now, you have to click and hold in the exact right place and getting back from the map is a challenge!!

I don't think this is internal.

[melvin-bot]

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

[melvin-bot]

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