[$500] mWeb/safari - IOU - Problems with selecting the numbers

[lanitochka17]

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: 1.4.33.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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing PR #35119

Action Performed:

1. Tap FAB - Request money
2. Type "22222"
3. Select all of the numbers
4. Try to move the right selector to the left

Expected Result:

I should be able to move the selector. The selection should only be visible on the digits I selected

Actual Result:

'm not able use the selector from the right side. It moves a digit and switches to the "Scan" tab. The selection is visible on the new tab for a short time

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6361361_1706644958076.UELM9210.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01751b37bd442a3d39
• Upwork Job ID: 1752429097808650240
• Last Price Increase: 2024-01-30
• Automatic offers:
• bernhardoj | Contributor | 28143597

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01751b37bd442a3d39

[melvin-bot]

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

[aswin-s]

Proposal

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

Unable to adjust selection within amount input in IOURequestMoney screen

What is the root cause of that problem?

IOURequestStartPage is wrapped in a OnyxNavigator.

App/src/pages/iou/request/IOURequestStartPage.js

Line 159 in 4e88eea

<OnyxTabNavigator

OnyxTabNavigator uses MaterialTopTabNavigator under the hood.

https://github.com/Expensify/App/blob/main/src/libs/Navigation/OnyxTabNavigator.tsx#L2C15-L2C38

Default behaviour of TopTabNavigator is to allow switching between the tabs by swiping horizontally across the screen. While trying to adjust the selection within AmountTextInput, swipe gesture is invoked at Navigator level and triggers tab switch.

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

Stop propagation of onTouchMove event at AmountTextInput level. This will make sure that the event doesn't get bubbled up to the TopTabNavigator and the tab switch never gets triggered.

onTouchMove={e => e.stopPropagation()}

What alternative solutions did you explore? (Optional)

Another option is to disable swipe gesture for the entire screen by passing swipeEnabled: false to screen options in IOURequestAmountScreen. This can also be conditionally enabled by checking if selection length within AmountTextInput is greater than one.

<TopTab.Screen name={CONST.TAB_REQUEST.MANUAL} options={{swipeEnabled: amountSelected ? false : true }}>{() => <IOURequestStepAmount route={route} />}</TopTab.Screen>

[bernhardoj]

Proposal

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

When trying to select the amount text, the tab is swiped.

What is the root cause of that problem?

When we try to select the text, the tab navigator receives the swipe touch too, so the tab is swiped to the next tab.

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

We had this issue on map view too before and what we did was to use a pan responder to intercept the swipe. On our textinput, we already have a shouldInterceptSwipe (added from this PR) that will apply the pan responder, so we can simply pass shouldInterceptSwipe to AmountTextInput.

[BryceAltman]

Proposal

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

Highlighting/selecting numbers in the IOU screen is not possible as the screen will swipe to the next tab.

What is the root cause of that problem?

The component used for the navigation on the IOU screen is a Material top tab navigator link to component

One of the default options "swipeEnabled" allows the swiping gesture between tabs, however the swiping gesture is not ignored in this situation when highlighting text.

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

My solution is to add event handlers to the AmountTextInput component here

App/src/components/AmountTextInput.tsx

Line 57 in 1b1eeb8

onKeyPress={onKeyPress}

After some testing, the best option seems to be to add onPointerOver and onPointerOut handlers so that the swipeEnabled can be set to false when the pointer is within the text box just for this tab.

I chose onPointer handlers as it works for both web and mobile, and this bug is actually also present on web and other browsers, not just iOS safari.

I also did not want to block the gesture altogether, as the AmountTextInput is used elsewhere and this could cause unwanted behaviour and regression down the line.

What alternative solutions did you explore? (Optional)

Considered removing swipe gestures entirely by setting swipeEnabled: false in OnyxTabNavigatorConfig/index.ts. But better to leave that functionality as is if possible.

[melvin-bot]

@JmillsExpensify, @thesahindia Huh... This is 4 days overdue. Who can take care of this?