Open IuliiaHerets opened 1 day ago
Triggered auto assignment to @joekaufmanexpensify (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.
Triggered auto assignment to @MarioExpensify (DeployBlockerCash
), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.
:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:
Edited by proposal-police: This proposal was edited at 2024-09-19 19:01:04 UTC.
PR - https://github.com/Expensify/App/pull/45481
I would not say it's regression but a missing case/observation while implementing the feature.
Web - Debug - RHP tabs can be swiped When we try to select text for copying and we swipe the mouse it changes the tab
This is default behaviour for tab navigation (check on submit expense view) where we can change between amount, bill and distance by swiping with mouse.
We can pass the options
prop on these components TopTab.Screen
as -
options={{swipeEnabled: false}}
Based on design team we can add this value based on device (phone or desktop). We also need to add default options if there are any passed.
https://github.com/user-attachments/assets/0ef25e29-e161-4c01-b79e-cb56214ae6ef
If we want to change other pages where we use tab navigator we can update there as well
Demoting as it's a debug feature
Job added to Upwork: https://www.upwork.com/jobs/~021836846411247309742
Triggered auto assignment to Contributor-plus team member for initial proposal review - @brunovjk (External
)
Current implementation of OnyxTabNavigator
does not support disabling the swipe gesture between tabs.
The swipeEnabled
prop is not directly supported in the TopTab.Navigator
component props. The proper place to pass this configuration is through the screenOptions prop, which allows customization of how individual screens behave.
OnyxTabNavigator
component to accept swipeEnabled
as part of the screenOptions
configuration.TopTab.Navigator
to pass swipeEnabled
: false within the screenOptions
to disable the swipe gesture, which aligns with the React Navigation API documentation.
https://github.com/Expensify/App/blob/df8ef03ae27f1a3860170178b3411389062b6c2c/src/libs/Navigation/OnyxTabNavigator.tsx#L131
screenOptions={{
...defaultScreenOptions,
swipeEnabled: false,
}}
This change will allow us to control whether users can swipe between tabs or not, based on specific use cases.
Updated proposal with proof of work:-
Before -
https://github.com/user-attachments/assets/f19cecb9-f60c-4498-aebf-a097b257501a
After code change-
https://github.com/user-attachments/assets/65200a50-18e4-4016-b547-3a859454e413
Web - Debug - RHP tabs can be swiped
shouldInterceptSwipe
prop is not passed to the text inputs.
https://github.com/Expensify/App/blob/25450d96aca5d30b0fef7bdbfc9379fa71e7cd74/src/pages/Debug/DebugDetails.tsx#L150-L221
shouldInterceptSwipe
prop to all TextInputs
.Hey everyone,
I've tested all of the proposals thoroughly, and here are my findings:
Proposal using swipeEnabled
:
While disabling the swipe works, this solution doesn’t align with our current behavior. In other tabs (e.g., submit expense view), swiping between sections like amount, bill, and distance is the intended and default behavior. We don’t want to change that globally, so disabling swipe is not a viable solution.
Proposal by @Krishna2323:
I tested the fix that adds the shouldInterceptSwipe
prop to TextInputs
, and it works great for tabs where we use input fields. When I attempt to select text within an input, the swipe is correctly prevented. However, we still have an issue when trying to select regular text, which is not wrapped inside an input, like in the DebugJSON
tab. While selecting text in this view, the swipe action still occurs, making it hard to copy the content.
https://github.com/user-attachments/assets/e19aa39e-bd66-4739-a2e9-bb37b79acb3e
Feel free to reach out if you have any ideas or suggestions! Let’s smash this bug together! 💪
@brunovjk, we can wrap the text in a view and apply the same logic as below.
@brunovjk, we can wrap the text in a view and apply the same logic as below.
Great @Krishna2323 can you include that in your proposal? I'll get back to you soon. Thanks!!
can we import {Gesture, GestureDetector} from 'react-native-gesture-handler';
and then create a custom gesture handler?
@brunovjk, proposal updated.
@1subodhpathak Perhaps, but as we use shouldInterceptSwipe
for these cases, I believe it would be more prudent to follow the same pattern.
I think we can go with @Krishna2323's proposal. It’s important to ensure this fix is applied consistently across all tab pages to prevent similar issues.
🎀👀🎀 C+ reviewed
Current assignee @MarioExpensify is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.
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: 9.0.38.0 Reproducible in staging?: Y Reproducible in production?: N/A - new feature, doesn't exist in prod Issue was found when executing this PR: https://github.com/Expensify/App/pull/45481 Issue reported by: Applause Internal Team
Action Performed:
Expected Result:
The opened tab should not be changed
Actual Result:
It swipes to the next tab
Workaround:
Unknown
Platforms:
Screenshots/Videos
https://github.com/user-attachments/assets/87c3546f-29bb-4f4f-a692-24fc39a1cb35
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @brunovjk