[$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?

[thesahindia]

@bernhardoj's proposal looks good to me!

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @bernhardoj 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[bernhardoj]

PR is ready

cc: @thesahindia

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[bernhardoj]

A new PR is ready

cc: @thesahindia

[JmillsExpensify]

Removing the awaiting payment part of the title given that the original PR was reverted.

[melvin-bot]

@JmillsExpensify, @francoisl, @bernhardoj, @thesahindia Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[francoisl]

The latest PR #36463 was deployed to production yesterday.

[melvin-bot]

@JmillsExpensify, @francoisl, @bernhardoj, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@JmillsExpensify, @francoisl, @bernhardoj, @thesahindia Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@JmillsExpensify, @francoisl, @bernhardoj, @thesahindia 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

@JmillsExpensify, @francoisl, @bernhardoj, @thesahindia 10 days overdue. Is anyone even seeing these? Hello?

[francoisl]

The fix has been deployed for 2 weeks, I think this is ready for payment now @JmillsExpensify .

[melvin-bot]

This issue has not been updated in over 14 days. @JmillsExpensify, @francoisl, @bernhardoj, @thesahindia eroding to Weekly issue.

[thesahindia]

This wasn't a regression.

If we want we can add a test case. Test steps -

1. Open the money request page
2. Type any amount
3. Do a text selection from right to left
4. Verify the tab doesn't get swiped

[melvin-bot]

This issue has not been updated in over 15 days. @JmillsExpensify, @francoisl, @bernhardoj, @thesahindia eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[JmillsExpensify]

Payment summary:

• Contributor: @bernhardoj $500
• Contributor+: @thesahindia $500

[JmillsExpensify]

Contributor paid out, and regression test suggestion has been posted above. It's pretty specific, so I'm not convinced we need to add a new one.

[JmillsExpensify]

I'm going to close out this issue though, as C+ is paid via New Expensify.

[laurenreidexpensify]

Payment summary:

Contributor: @bernhardoj $500 - paid in upwork
Contributor+: @thesahindia $500 - paid in newdot

[JmillsExpensify]

$500 approved for @thesahindia