[HOLD for payment 2023-04-26] [$2000] Text selection is Inconsistency #16420

kavimuru · 2023-03-22T19:44:24Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Open any chat
Select the "Say hello" text given in top space

Expected Result:

Selection should be consistent on all platforms

Actual Result:

Selection is not consistent among all platforms

Workaround:

unknown

Platforms:

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

Version Number: 1.2.88-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
Notes/Photos/Videos:

Screen.Recording.2023-03-22.at.1.21.39.PM.mov

Recording.136.mp4

Expensify/Expensify Issue URL:
Issue reported by: @DinalJivani
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1679471738156789

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~013fb4b31533dd1abd
Upwork Job ID: 1640431307496505344
Last Price Increase: 2023-04-10

MelvinBot · 2023-03-22T19:44:30Z

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

MelvinBot · 2023-03-22T19:44:33Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

puneetlath · 2023-03-27T19:11:06Z

Interesting. Doesn't seem to be selectable on Mac Desktop either. So it's not selectable on Mac Desktop or Chrome, but it is selectable on Safari. I would think it should be selectable on all.

MelvinBot · 2023-03-27T19:11:18Z

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

MelvinBot · 2023-03-27T19:11:22Z

Current assignee @puneetlath is eligible for the External assigner, not assigning anyone new.

MelvinBot · 2023-03-27T19:11:30Z

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

MelvinBot · 2023-03-27T19:11:35Z

Current assignee @puneetlath is eligible for the External assigner, not assigning anyone new.

PrashantMangukiya · 2023-03-27T19:11:36Z

Proposal

User can not select text consistently in different browser and desktop for hero text and description displayed at beginning of new chat.

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

What is the root cause of that problem?

This Say Hello content generated via code below:

App/src/components/ReportWelcomeText.js

Lines 69 to 94 in 95d7990

    
           <View> 
        
               <Text style={[styles.textHero]}> 
        
                   {props.translate('reportActionsView.sayHello')} 
        
               </Text> 
        
           </View> 
        
           <Text style={[styles.mt3, styles.mw100]}> 
        
               {isPolicyExpenseChat && ( 
        
                   <> 
        
                       <Text> 
        
                           {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartOne')} 
        
                       </Text> 
        
                       <Text style={[styles.textStrong]}> 
        
                           {/* Use the policyExpenseChat owner's first name or their email if it's undefined or an empty string */} 
        
                           {lodashGet(props.personalDetails, [props.report.ownerEmail, 'firstName']) || props.report.ownerEmail} 
        
                       </Text> 
        
                       <Text> 
        
                           {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartTwo')} 
        
                       </Text> 
        
                       <Text style={[styles.textStrong]}> 
        
                           {ReportUtils.getPolicyName(props.report, props.policies)} 
        
                       </Text> 
        
                       <Text> 
        
                           {props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartThree')} 
        
                       </Text> 
        
                   </> 
        
               )}

We can see at line 71 it will display Say hello via Text component wrapped, other text displayed via Text component wrapped at line 74, So there is not user-select css style property applied to these Text component, So selection behaviour is not consistence. This is the root cause of the problem.

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

We have to apply styles.userSelectText style to Text component as shown below, so it will make text selection consistence in all browser.

 <View> 
     <Text style={[styles.textHero, styles.userSelectText]}> 
         {props.translate('reportActionsView.sayHello')} 
     </Text> 
 </View> 
 <Text style={[styles.mt3, styles.mw100, styles.userSelectText]}>
   ...
 </Text>

So this will solve the problem and make text selectable consistence in all browser and desktop app. See results.

What alternative solutions did you explore? (Optional)

None.

Results

Desktop

Desktop.mov

Chrome

Chrome.mov

Safari

Safari.mov

ahmedGaber93 · 2023-03-27T22:57:08Z

Proposal

to make any text selectable in react native in all platform we need add prop selectable to Text.

offical soluation make it work in all platforms see selectable in docs.

<Text selectable>select me</Text>

Screen.Recording.2023-03-28.at.12.49.19.AM.mov

Contributor details
Your Expensify account email: a.gaber.dev@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~012883934e2c4dc4e7

MelvinBot · 2023-03-27T22:57:11Z

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

tienifr · 2023-03-28T09:11:30Z

Proposal

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

Text selection is Inconsistency among platform

What is the root cause of that problem?

In ScreenWrapper Component, we are using userSelect: 'auto'

App/src/styles/styles.js

Lines 1321 to 1325 in 7003d95

    
           // Starting version 6.3.2 @react-navigation/drawer adds "user-select: none;" to its container. 
        
           // We add user-select-auto to the inner component to prevent incorrect triple-click text selection. 
        
           // For further explanation see - https://github.com/Expensify/App/pull/12730/files#r1022883823 
        
           userSelect: 'auto', 
        
           WebkitUserSelect: 'auto',

So the selection of text will depend on the browser as reference

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

In here

App/src/styles/styles.js

Lines 1321 to 1325 in 7003d95

    
           // Starting version 6.3.2 @react-navigation/drawer adds "user-select: none;" to its container. 
        
           // We add user-select-auto to the inner component to prevent incorrect triple-click text selection. 
        
           // For further explanation see - https://github.com/Expensify/App/pull/12730/files#r1022883823 
        
           userSelect: 'auto', 
        
           WebkitUserSelect: 'auto',

We should use the text value for userSelect and WebkitUserSelect if we want the text can be selected on all platforms

I just applied this solution and did not encounter the issue mentioned in #12730

We can consider using -ms-user-select with the same value as userSelect and WebkitUserSelect

What alternative solutions did you explore? (Optional)

Result

Safari

Chrome

s77rt · 2023-03-29T01:18:44Z

I think this has the same root cause of #14402. At that time we decided to just close the issue since the changes are not that easy to test across the app.

MelvinBot · 2023-03-31T09:38:00Z

@puneetlath, @rushatgabhane Whoops! This issue is 2 days overdue. Let's get this updated quick!

rushatgabhane · 2023-03-31T09:56:01Z

@tienifr your proposal will make all text in the app selectable?

rushatgabhane · 2023-04-03T02:33:55Z

waiting on @tienifr's reply

tienifr · 2023-04-03T02:42:19Z

@rushatgabhane My proposal only updates userSelect and WebkitUserSelect in Report Screen.

MelvinBot · 2023-04-19T16:58:26Z

Reviewing label has been removed, please complete the "BugZero Checklist".

MelvinBot · 2023-04-19T16:58:28Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.1-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix/16420: text selection inconsistency in ReportScreen #17330

If no regressions arise, payment will be issued on 2023-04-26. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter @DinalJivani
Contributor that fixed the issue @tienifr
Contributor+ that helped on the issue and/or PR @rushatgabhane

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

MelvinBot · 2023-04-19T16:58:31Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@rushatgabhane] The PR that introduced the bug has been identified. Link to the PR: n/a (see below)
[@rushatgabhane] 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: n/a (see below)
[@rushatgabhane] 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: n/a (see below)
[@puneetlath] Determine if we should create a regression test for this bug. No
[@rushatgabhane] 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.
[@puneetlath] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/281436

puneetlath · 2023-04-20T20:51:37Z

@DinalJivani @tienifr can you apply to the upwork job please: https://www.upwork.com/jobs/~013fb4b31533dd1abd

DinalJivani · 2023-04-20T20:55:27Z

@puneetlath
Do we have to apply to this Upwork job?
Because till now we get offer directly on Upwork.

puneetlath · 2023-04-20T20:58:41Z

Yes, please apply!

DinalJivani · 2023-04-20T21:00:25Z

@puneetlath Applied!

tienifr · 2023-04-21T03:08:19Z

@puneetlath applied, thanks!

puneetlath · 2023-04-25T14:52:07Z

@rushatgabhane bump on the checklist.

puneetlath · 2023-04-26T14:31:29Z

Paid @tienifr. Just waiting on checklist for @rushatgabhane

puneetlath · 2023-05-01T15:23:19Z

@rushatgabhane another friendly bump on the checklist so that we can get this issue closed out and get you paid. Thanks!

puneetlath · 2023-05-03T20:30:35Z

@rushatgabhane bump again. Let's get this to the finish line!

rushatgabhane · 2023-05-05T09:37:23Z

The PR that introduced the bug has been identified. Link to the PR: This is a new feature and not a bug.
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: New feature, and not a bug.
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: N.A. because this is a feature.
Determine if we should create a regression test for this bug - I'm slightlyy leaning towards yes.

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.

Open newDot and login.
Create a new chat with an account that you haven't messaged before.
On web, verify that the welcome text ("Say hello! This is the beginning of your chat...") is selectable using your mouse by dragging the cursor.

rushatgabhane · 2023-05-05T09:42:47Z

@puneetlath im extremely sorry for the delay!
i've commented the steps above because i can't edit the bot comment

puneetlath · 2023-05-05T17:29:34Z

Thanks @rushatgabhane!

Can you accept the Upwork offer as well so that I can pay you out?

melvin-bot · 2023-05-08T20:08:22Z

@puneetlath, @rushatgabhane, @tienifr Whoops! This issue is 2 days overdue. Let's get this updated quick!

puneetlath · 2023-05-08T20:11:26Z

Just waiting for @rushatgabhane to accept the Upwork offer.

rushatgabhane · 2023-05-09T05:23:22Z

@puneetlath sent you a dm on new dot

puneetlath · 2023-05-10T17:20:12Z

All paid. Thanks everyone!

kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Mar 22, 2023

melvin-bot bot assigned puneetlath Mar 22, 2023

melvin-bot bot added the Overdue label Mar 27, 2023

melvin-bot bot removed the Overdue label Mar 27, 2023

puneetlath added the External Added to denote the issue can be worked on by a contributor label Mar 27, 2023

melvin-bot bot changed the title ~~Text selection is Inconsistency~~ [$1000] Text selection is Inconsistency Mar 27, 2023

melvin-bot bot assigned rushatgabhane Mar 27, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 27, 2023

melvin-bot bot added the Overdue label Mar 30, 2023

melvin-bot bot added Overdue and removed Overdue labels Mar 31, 2023

melvin-bot bot removed the Overdue label Apr 3, 2023

melvin-bot bot changed the title ~~[$1000] Text selection is Inconsistency~~ [$2000] Text selection is Inconsistency Apr 3, 2023

melvin-bot bot changed the title ~~[$2000] Text selection is Inconsistency~~ [HOLD for payment 2023-04-26] [$2000] Text selection is Inconsistency Apr 19, 2023

melvin-bot bot removed the Reviewing Has a PR in review label Apr 19, 2023

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Apr 26, 2023

melvin-bot bot added the Overdue label May 1, 2023

melvin-bot bot added Overdue and removed Overdue labels May 1, 2023

melvin-bot bot removed the Overdue label May 3, 2023

melvin-bot bot added the Overdue label May 8, 2023

melvin-bot bot removed the Overdue label May 8, 2023

puneetlath closed this as completed May 10, 2023

[HOLD for payment 2023-04-26] [$2000] Text selection is Inconsistency #16420

[HOLD for payment 2023-04-26] [$2000] Text selection is Inconsistency #16420

Comments

kavimuru commented Mar 22, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

MelvinBot commented Mar 22, 2023

MelvinBot commented Mar 22, 2023

Bug0 Triage Checklist (Main S/O)

puneetlath commented Mar 27, 2023

MelvinBot commented Mar 27, 2023

MelvinBot commented Mar 27, 2023

MelvinBot commented Mar 27, 2023

MelvinBot commented Mar 27, 2023

PrashantMangukiya commented Mar 27, 2023

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)

Desktop

Chrome

Safari

ahmedGaber93 commented Mar 27, 2023 • edited Loading

Proposal

MelvinBot commented Mar 27, 2023

tienifr commented Mar 28, 2023 • 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

s77rt commented Mar 29, 2023

MelvinBot commented Mar 31, 2023

rushatgabhane commented Mar 31, 2023 • edited Loading

rushatgabhane commented Apr 3, 2023

tienifr commented Apr 3, 2023 • edited Loading

MelvinBot commented Apr 19, 2023

MelvinBot commented Apr 19, 2023 • edited by puneetlath Loading

MelvinBot commented Apr 19, 2023 • edited by puneetlath Loading

puneetlath commented Apr 20, 2023

DinalJivani commented Apr 20, 2023

puneetlath commented Apr 20, 2023

DinalJivani commented Apr 20, 2023

tienifr commented Apr 21, 2023

puneetlath commented Apr 25, 2023

puneetlath commented Apr 26, 2023

puneetlath commented May 1, 2023

puneetlath commented May 3, 2023

rushatgabhane commented May 5, 2023 • edited Loading

rushatgabhane commented May 5, 2023

puneetlath commented May 5, 2023

melvin-bot bot commented May 8, 2023

puneetlath commented May 8, 2023

rushatgabhane commented May 9, 2023 • edited Loading

puneetlath commented May 10, 2023

kavimuru commented Mar 22, 2023 •

edited by melvin-bot bot

Loading

ahmedGaber93 commented Mar 27, 2023 •

edited

Loading

tienifr commented Mar 28, 2023 •

edited

Loading

rushatgabhane commented Mar 31, 2023 •

edited

Loading

tienifr commented Apr 3, 2023 •

edited

Loading

MelvinBot commented Apr 19, 2023 •

edited by puneetlath

Loading

MelvinBot commented Apr 19, 2023 •

edited by puneetlath

Loading

rushatgabhane commented May 5, 2023 •

edited

Loading

rushatgabhane commented May 9, 2023 •

edited

Loading