[hold for payment 2024-10-08] [$250] Web - Debug - RHP tabs can be swiped #49483

IuliiaHerets · 2024-09-19T18:31:26Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] 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: #45481
Issue reported by: Applause Internal Team

Action Performed:

Go to https://staging.new.expensify.com/ and log in
Navigate to Account settings > Troubleshoot
Enable the debug mode toggle
Navigate to any report
Click on the header > Debug
Long press left mouse button and swipe like selecting a text to copy

Expected Result:

The opened tab should not be changed

Actual Result:

It swipes to the next tab

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6608974_1726758147798.Recording__801.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021836846411247309742
Upwork Job ID: 1836846411247309742
Last Price Increase: 2024-09-19
Automatic offers:

brunovjk | Reviewer | 104110789
Krishna2323 | Contributor | 104110791

Issue Owner

Current Issue Owner: @brunovjk

melvin-bot · 2024-09-19T18:31:35Z

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.

melvin-bot · 2024-09-19T18:31:36Z

Triggered auto assignment to @MarioExpensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

github-actions · 2024-09-19T18:31:40Z

👋 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:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

BhuvaneshPatil · 2024-09-19T18:57:54Z

Edited by proposal-police: This proposal was edited at 2024-09-19 19:01:04 UTC.

Proposal

PR - #45481

I would not say it's regression but a missing case/observation while implementing the feature.

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

Web - Debug - RHP tabs can be swiped
When we try to select text for copying and we swipe the mouse it changes the tab

What is the root cause of that problem?

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.

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

We can pass the options prop on these components TopTab.Screen

App/src/pages/Debug/ReportAction/DebugReportActionPage.tsx

Lines 54 to 67 in 98dc643

    
           <TopTab.Screen name={CONST.DEBUG.DETAILS}> 
        
               {() => ( 
        
                   <DebugDetails 
        
                       data={reportAction} 
        
                       onSave={(data) => { 
        
                           Debug.mergeDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: data}); 
        
                       }} 
        
                       onDelete={() => { 
        
                           Debug.mergeDebugData(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {[reportActionID]: null}); 
        
                       }} 
        
                       validate={DebugUtils.validateReportActionDraftProperty} 
        
                   /> 
        
               )} 
        
           </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.

Screen.Recording.2024-09-20.at.12.26.45.AM.mov

If we want to change other pages where we use tab navigator we can update there as well

What alternative solutions did you explore? (Optional)

grgia · 2024-09-19T19:14:32Z

Demoting as it's a debug feature

melvin-bot · 2024-09-19T19:14:48Z

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

melvin-bot · 2024-09-19T19:14:53Z

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

1subodhpathak · 2024-09-19T21:04:42Z

Proposal

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

Current implementation of OnyxTabNavigator does not support disabling the swipe gesture between tabs.

What is the root cause of that problem?

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.

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

We should modify the OnyxTabNavigator component to accept swipeEnabled as part of the screenOptions configuration.
Then, update the TopTab.Navigator to pass swipeEnabled: false within the screenOptions to disable the swipe gesture, which aligns with the React Navigation API documentation.

App/src/libs/Navigation/OnyxTabNavigator.tsx

Line 131 in df8ef03

screenOptions={defaultScreenOptions}

screenOptions={{
     ...defaultScreenOptions,
     swipeEnabled: false,
}}

This change will allow us to control whether users can swipe between tabs or not, based on specific use cases.

What alternative solutions did you explore? (Optional)

1subodhpathak · 2024-09-19T21:30:49Z

Updated proposal with proof of work:-

Before -

Recording.2024-09-20.Before.mp4

After code change-

Recording.2024-09-20.023122.mp4

Krishna2323 · 2024-09-19T21:38:01Z

Proposal 

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

Web - Debug - RHP tabs can be swiped

What is the root cause of that problem?

shouldInterceptSwipe prop is not passed to the text inputs.

App/src/pages/Debug/DebugDetails.tsx

Lines 150 to 221 in 25450d9

    
                       <InputWrapper 
        
                           InputComponent={TextInput} 
        
                           inputID={key} 
        
                           accessibilityLabel={key} 
        
                           shouldSaveDraft 
        
                           forceActiveLabel 
        
                           label={key} 
        
                           numberOfLines={numberOfLines} 
        
                           multiline={numberOfLines > 1} 
        
                           defaultValue={value} 
        
                           disabled={DETAILS_DISABLED_KEYS.includes(key as DetailsDisabledKeys)} 
        
                       /> 
        
                   ); 
        
               })} 
        
               {textFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>} 
        
           </View> 
        
           <Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.numberFields')}</Text> 
        
           <View style={[styles.mb5, styles.ph5, styles.gap5]}> 
        
               {numberFields.map(([key, value]) => ( 
        
                   <InputWrapper 
        
                       InputComponent={TextInput} 
        
                       inputID={key} 
        
                       accessibilityLabel={key} 
        
                       shouldSaveDraft 
        
                       forceActiveLabel 
        
                       label={key} 
        
                       defaultValue={String(value)} 
        
                       disabled={DETAILS_DISABLED_KEYS.includes(key as DetailsDisabledKeys)} 
        
                   /> 
        
               ))} 
        
               {numberFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>} 
        
           </View> 
        
           <Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.constantFields')}</Text> 
        
           <View style={styles.mb5}> 
        
               {constantFields.map(([key, value]) => ( 
        
                   <InputWrapper 
        
                       key={key} 
        
                       InputComponent={ConstantSelector} 
        
                       inputID={key} 
        
                       name={key} 
        
                       shouldSaveDraft 
        
                       defaultValue={String(value)} 
        
                   /> 
        
               ))} 
        
               {constantFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>} 
        
           </View> 
        
           <Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.dateTimeFields')}</Text> 
        
           <View style={styles.mb5}> 
        
               {dateTimeFields.map(([key, value]) => ( 
        
                   <InputWrapper 
        
                       key={key} 
        
                       InputComponent={DateTimeSelector} 
        
                       inputID={key} 
        
                       name={key} 
        
                       shouldSaveDraft 
        
                       defaultValue={String(value)} 
        
                   /> 
        
               ))} 
        
               {dateTimeFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>} 
        
           </View> 
        
           <Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.booleanFields')}</Text> 
        
           <View style={[styles.mb5, styles.ph5, styles.gap5]}> 
        
               {booleanFields.map(([key, value]) => ( 
        
                   <InputWrapper 
        
                       InputComponent={CheckboxWithLabel} 
        
                       label={key} 
        
                       inputID={key} 
        
                       shouldSaveDraft 
        
                       accessibilityLabel={key} 
        
                       defaultValue={value} 
        
                   /> 
        
               ))}

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

Add shouldInterceptSwipe prop to all TextInputs.
We should also check other tabs pages.
For DebugJson tab we can wrap the text in a view and apply the same logic as below.

What alternative solutions did you explore? (Optional)

Result

1subodhpathak · 2024-09-19T22:07:41Z

Updated comment

brunovjk · 2024-09-20T15:27:02Z

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.

Screen.Recording.2024-09-20.at.12.22.11.mov

Feel free to reach out if you have any ideas or suggestions! Let’s smash this bug together! 💪

Krishna2323 · 2024-09-20T15:32:07Z

@brunovjk, we can wrap the text in a view and apply the same logic as below.

App/src/components/TextInput/BaseTextInput/index.tsx

Line 290 in ee7cdad

{...(shouldInterceptSwipe && SwipeInterceptPanResponder.panHandlers)}

brunovjk · 2024-09-20T16:32:55Z

@brunovjk, we can wrap the text in a view and apply the same logic as below.

App/src/components/TextInput/BaseTextInput/index.tsx

Line 290 in ee7cdad

{...(shouldInterceptSwipe && SwipeInterceptPanResponder.panHandlers)}

Great @Krishna2323 can you include that in your proposal? I'll get back to you soon. Thanks!!

1subodhpathak · 2024-09-20T16:42:28Z

can we import {Gesture, GestureDetector} from 'react-native-gesture-handler'; and then create a custom gesture handler?

Krishna2323 · 2024-09-20T16:49:53Z

@brunovjk, proposal updated.

brunovjk · 2024-09-20T18:47:03Z

@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

melvin-bot · 2024-09-20T18:47:12Z

Current assignee @MarioExpensify is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

melvin-bot · 2024-09-23T12:55:19Z

Current assignee @MarioExpensify is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

joekaufmanexpensify · 2024-09-24T13:44:27Z

@MarioExpensify Do you think you'll have a chance to sign off on this proposal soon?

melvin-bot · 2024-09-24T17:39:43Z

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

Offer link
Upwork job

melvin-bot · 2024-09-24T17:39:47Z

📣 @Krishna2323 🎉 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 📖

MarioExpensify · 2024-09-24T17:40:19Z

@Krishna2323 sounds good, thank you and thanks @brunovjk! Waiting for the PR on this one.

joekaufmanexpensify · 2024-09-25T16:47:31Z

@Krishna2323 is there an ETA for PR here?

Krishna2323 · 2024-09-25T21:43:08Z

Will raise PR within 24 hours.

joekaufmanexpensify · 2024-09-27T13:19:00Z

Hmmm, I agree the behavior in the bug report is a bit odd, but are we sure it is not intended? This same behavior exists on the submit expense RHP, create chat RHP, and track expense RHP. Or was this a bug introduced at the same time for all of them?

MarioExpensify · 2024-09-27T17:19:53Z

@joekaufmanexpensify from testing this, it seems the major issue is on browsers, when trying to select text to copy with the mouse you end up switching tabs.

brunovjk · 2024-10-02T18:52:30Z

The PR went into production on Oct 1.

c: @joekaufmanexpensify

joekaufmanexpensify · 2024-10-03T22:09:28Z

TY!

brunovjk · 2024-10-07T14:20:02Z

[@brunovjk] The PR that introduced the bug has been identified. Link to the PR: Debug Mode - Report and Report Actions #45481
[@brunovjk] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: I dont believe it's regression but a missing case/observation while implementing the feature.
[@brunovjk] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@brunovjk] Determine if we should create a regression test for this bug. Yes
[@brunovjk] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal:

Navigate to Account settings > Troubleshoot
Enable the debug mode toggle
Navigate to any report
Click on the header > Debug
Long press left mouse button and swipe like selecting a text to copy
Verify text is selected and the tab is not swiped
Go to JSON tab
In text box long press left mouse button and swipe like selecting a text to copy
In a web environment: Verify text is selected and the tab is not swiped.
In a native environment: Verify text is not selected and the tab is swiped.

Do we agree 👍 or 👎?

cc: @joekaufmanexpensify

joekaufmanexpensify · 2024-10-07T15:00:07Z

TY! Given this is an internal debugging tool rather than something that impacts customers, I don't think we need a regression test that's run every time here. But other than that, looks good.

joekaufmanexpensify · 2024-10-07T15:00:44Z

All set for payment tomorrow! We need to pay:

@Krishna2323 - $250 for PR via Upwork.
@brunovjk - $250 for C+ via Upwork.

joekaufmanexpensify · 2024-10-08T19:34:22Z

@brunovjk $250 sent and contract ended!

joekaufmanexpensify · 2024-10-08T19:34:31Z

@Krishna2323 $250 sent and contract ended!

joekaufmanexpensify · 2024-10-08T19:34:36Z

Upwork job closed.

joekaufmanexpensify · 2024-10-08T19:34:44Z

All set, thanks everyone!

IuliiaHerets added DeployBlockerCash This issue or pull request should block deployment Bug Something is broken. Auto assigns a BugZero manager. labels Sep 19, 2024

melvin-bot bot assigned joekaufmanexpensify Sep 19, 2024

melvin-bot bot added the Daily KSv2 label Sep 19, 2024

melvin-bot bot assigned MarioExpensify Sep 19, 2024

github-actions bot added Engineering Hourly KSv2 and removed Daily KSv2 labels Sep 19, 2024

github-actions bot mentioned this issue Sep 19, 2024

Deploy Checklist: New Expensify 2024-09-18 #49427

Closed

43 tasks

grgia removed the DeployBlockerCash This issue or pull request should block deployment label Sep 19, 2024

grgia added the External Added to denote the issue can be worked on by a contributor label Sep 19, 2024

melvin-bot bot changed the title ~~Web - Debug - RHP tabs can be swiped~~ [$250] Web - Debug - RHP tabs can be swiped Sep 19, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 19, 2024

grgia added Daily KSv2 and removed Hourly KSv2 Help Wanted Apply this label when an issue is open to proposals by contributors labels Sep 19, 2024

melvin-bot bot assigned brunovjk Sep 19, 2024

MarioExpensify assigned Krishna2323 Sep 24, 2024

Krishna2323 mentioned this issue Sep 26, 2024

fix: Web - Debug - RHP tabs can be swiped. #49764

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Sep 26, 2024

joekaufmanexpensify changed the title ~~[$250] Web - Debug - RHP tabs can be swiped~~ [hold for payment 2024-10-08] [$250] Web - Debug - RHP tabs can be swiped Oct 3, 2024

joekaufmanexpensify closed this as completed Oct 8, 2024

[hold for payment 2024-10-08] [$250] Web - Debug - RHP tabs can be swiped #49483

[hold for payment 2024-10-08] [$250] Web - Debug - RHP tabs can be swiped #49483

Comments

IuliiaHerets commented Sep 19, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

github-actions bot commented Sep 19, 2024

BhuvaneshPatil commented Sep 19, 2024 • edited by github-actions bot Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

grgia commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

melvin-bot bot commented Sep 19, 2024

1subodhpathak commented Sep 19, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

1subodhpathak commented Sep 19, 2024 • edited Loading

Krishna2323 commented Sep 19, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

1subodhpathak commented Sep 19, 2024

brunovjk commented Sep 20, 2024

Krishna2323 commented Sep 20, 2024

brunovjk commented Sep 20, 2024

1subodhpathak commented Sep 20, 2024

Krishna2323 commented Sep 20, 2024

brunovjk commented Sep 20, 2024

melvin-bot bot commented Sep 20, 2024

melvin-bot bot commented Sep 23, 2024

joekaufmanexpensify commented Sep 24, 2024

melvin-bot bot commented Sep 24, 2024

melvin-bot bot commented Sep 24, 2024

MarioExpensify commented Sep 24, 2024

joekaufmanexpensify commented Sep 25, 2024

Krishna2323 commented Sep 25, 2024

joekaufmanexpensify commented Sep 27, 2024

MarioExpensify commented Sep 27, 2024

brunovjk commented Oct 2, 2024

joekaufmanexpensify commented Oct 3, 2024

brunovjk commented Oct 7, 2024 • edited Loading

joekaufmanexpensify commented Oct 7, 2024

joekaufmanexpensify commented Oct 7, 2024

joekaufmanexpensify commented Oct 8, 2024

joekaufmanexpensify commented Oct 8, 2024

joekaufmanexpensify commented Oct 8, 2024

joekaufmanexpensify commented Oct 8, 2024

IuliiaHerets commented Sep 19, 2024 •

edited by melvin-bot bot

Loading

BhuvaneshPatil commented Sep 19, 2024 •

edited by github-actions bot

Loading

1subodhpathak commented Sep 19, 2024 •

edited

Loading

1subodhpathak commented Sep 19, 2024 •

edited

Loading

Krishna2323 commented Sep 19, 2024 •

edited

Loading

Proposal 

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

brunovjk commented Oct 7, 2024 •

edited

Loading