Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-02-10] [$2000] Showing pointer cursor on code-block chat message instead of I-beam cursor #14301

Closed
2 tasks
kavimuru opened this issue Jan 13, 2023 · 49 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@kavimuru
Copy link

kavimuru commented Jan 13, 2023

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Action Performed:

  1. Open any chat room.
  2. Send code-block message test
  3. Hover on code-block message.

Expected Result:

On code-block message should show I-beam cursor as it not performing any action. We can copy it as normal text.

Actual Result:

Showing Pointer cursor on code-block messages.

Workaround:

unknown

Platforms:

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

  • MacOS / Chrome / Safari
  • MacOS / Desktop

Version Number: 1.2.54-2
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:

pointer-cursor.mov
Recording.1283.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~014c6f096c770787e9
  • Upwork Job ID: 1615834499213443072
  • Last Price Increase: 2023-01-25
@kavimuru kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jan 13, 2023
@melvin-bot melvin-bot bot locked and limited conversation to collaborators Jan 13, 2023
@arielgreen
Copy link
Contributor

arielgreen commented Jan 18, 2023

Bug0 Triage Checklist

Note: see this SO for more information.

  • The "bug" is actually a bug
  • The bug is not a duplicate report of an existing GH.
    • If it is, close the GH and add any novel details to the original GH instead
  • The bug is reproducible, following the reproduction steps.
    • [ ] If the GH doesn’t have steps to reliably reproduce the bug and you figure it out, then please add them.
    • [ ] If you’re unable to reproduce the bug, add the Needs reproduction label.
    • [ ] Comment on the issue outlining the steps you took to try to reproduce the bug, your results and tag the issue reporter and the Applause QA member who created the issue. Ask them to clarify reproduction steps and/or to check the reproduction steps again. Close issue.
  • The GH template is filled out as fully as possible
    • The GH body and title are clear (ie. could an external contributor understand it and work on it?)
  • The GH was created by an Expensify employee or a QA tester
  • [ ] If the bug is an OldDot issue, you should decide whether it is widespread enough to justify fixing or it is better to wait for reunification. If it’s better to wait, close the GH & provide this justification
  • If there's a link to Slack, check the discussion to see if we decided not to fix it
  • Decide if the GH should be resolved by an External contributor or Internal engineer, add the appropriate label

@arielgreen arielgreen added the External Added to denote the issue can be worked on by a contributor label Jan 18, 2023
@melvin-bot melvin-bot bot unlocked this conversation Jan 18, 2023
@melvin-bot melvin-bot bot changed the title Showing pointer cursor on code-block chat message instead of I-beam cursor [$1000] Showing pointer cursor on code-block chat message instead of I-beam cursor Jan 18, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jan 18, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jan 18, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Jan 18, 2023

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

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 18, 2023
@melvin-bot
Copy link

melvin-bot bot commented Jan 18, 2023

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

@Prince-Mendiratta
Copy link
Contributor

Prince-Mendiratta commented Jan 18, 2023

Proposal

RCA

This issue is caused after the merging of PR #12987 . The use of the Pressable component automatically converts the cursor to a pointer.

Solution

We can specifically pass the cursor: auto; OR cursor: text style to make sure that the <pre> blocks are treated as text and show the I-beam.

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
index 25ea94e0ae..0e3946a273 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
@@ -6,6 +6,7 @@ import _ from 'underscore';
 import htmlRendererPropTypes from '../htmlRendererPropTypes';
 import withLocalize from '../../../withLocalize';
 import {ShowContextMenuContext, showContextMenuForReport} from '../../../ShowContextMenuContext';
+import styles from '../../../../styles/styles';
 
 const propTypes = {
     /** Press in handler for the code block */
@@ -42,6 +43,7 @@ const BasePreRenderer = forwardRef((props, ref) => {
                         onPressIn={props.onPressIn}
                         onPressOut={props.onPressOut}
                         onLongPress={event => showContextMenuForReport(event, anchor, reportID, action, checkIfContextMenuActive)}
+                        style={[styles.cursorAuto]}
                     >
                         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                         <TDefaultRenderer {...defaultRendererProps} />
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 71fed02015..6c163b940c 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2360,6 +2360,10 @@ const styles = {
         cursor: 'pointer',
     },
 
+    cursorAuto: {
+        cursor: 'auto',
+    },
+
     fullscreenCard: {
         position: 'absolute',
         left: 0,

Results

2023-01-19.04-20-44.mp4

@daraksha-dk
Copy link
Contributor

Proposal

We can fix this by creating and using cursorAuto style in BaseHTMLEngineProvider.js

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
index 456cd1ecf..999771e6c 100755
--- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
+++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -41,7 +41,7 @@ const customHTMLElementModels = {
     }),
 };

-const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
+const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText, styles.cursorAuto]};

 // We are using the explicit composite architecture for performance gains.
 // Configuration for RenderHTML is handled in a top-level component providing
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 71fed0201..1761c21db 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -2343,6 +2343,10 @@ const styles = {
         marginVertical: 4,
     },

+    cursorAuto: {
+        cursor: 'auto',
+    },
+
     cursorDefault: {
         cursor: 'default',
     },

Demo

cursor.mp4

@mollfpr
Copy link
Contributor

mollfpr commented Jan 19, 2023

Thanks, guys for the proposals!

Since this issue only occurs for the pre tag I'm inclined to add the style where it's needed. So, I say we can go with @Prince-Mendiratta proposal. cc @cead22 @arielgreen

🎀 👀 🎀 C+ reviewed!

@Prince-Mendiratta
Copy link
Contributor

@mollfpr During testing, I noticed another issue I'd like to discuss. Trying to select a text enclosed in <pre> or <code>, it is not possible to select the text by clicking once and dragging the cursor. You would need to double click and then drag the cursor to select the text. Is this intended behaviour?

@Prince-Mendiratta
Copy link
Contributor

Update on above comment, turns out to be a new edge case that hasn't been reported. This issue is only occurring for desktops that have a touch screen. By default, selection is disabled for touch screen devices. This is targeted for the mobile platforms.

https://github.com/Expensify/App/blob/main/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/index.js#L63-L64

We should discuss if this is something that should be within our scope of support. This issue will occur for all touch screen enabled desktops, wherever ControlSelection.block() is used. Should I create a thread on slack for this and if we should create a new issue regarding this?

@s77rt
Copy link
Contributor

s77rt commented Jan 19, 2023

Proposal (kind of)

Revert BasePreRenderer to https://github.com/Expensify/App/blob/9f2ce1aeb95884d68ea5250867f8910dbb65d8dc/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js

RCA

This is a regression by #12987
After that PR the PreRenderer is now rendered in a <Pressable /> and that does not make sense as we are only displaying text. That PR did change a lot so maybe the change of PreRenderer was unintentional. Need someone to confirm this.

@s77rt
Copy link
Contributor

s77rt commented Jan 19, 2023

Proposal 2

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
index 25ea94e0ae..e52aa318f6 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
+++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer/BasePreRenderer.js
@@ -1,6 +1,6 @@
 import React, {forwardRef} from 'react';
 import {ScrollView} from 'react-native-gesture-handler';
-import {Pressable} from 'react-native';
+import {TouchableWithoutFeedback, View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import htmlRendererPropTypes from '../htmlRendererPropTypes';
@@ -38,14 +38,16 @@ const BasePreRenderer = forwardRef((props, ref) => {
                     action,
                     checkIfContextMenuActive,
                 }) => (
-                    <Pressable
+                    <TouchableWithoutFeedback
                         onPressIn={props.onPressIn}
                         onPressOut={props.onPressOut}
                         onLongPress={event => showContextMenuForReport(event, anchor, reportID, action, checkIfContextMenuActive)}
                     >
-                        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-                        <TDefaultRenderer {...defaultRendererProps} />
-                    </Pressable>
+                        <View>
+                            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+                            <TDefaultRenderer {...defaultRendererProps} />
+                        </View>
+                    </TouchableWithoutFeedback>
                 )}
             </ShowContextMenuContext.Consumer>
         </ScrollView>

RCA

In case my finding above is incorrect and that wrapping inside <Pressable /> is indeed intentional then I suggest that we replace Pressable with TouchableWithoutFeedback that have the same props as Pressable but without feedback as the name suggests thus we won't get the cursor pointer.

@cead22
Copy link
Contributor

cead22 commented Jan 20, 2023

@mollfpr I think both solutions work, but I'm curious if you think using TouchableWithoutFeedback is better than hardcoding the style. If so, let's go with that proposal. If not, I agree with going with @Prince-Mendiratta 's

@mollfpr
Copy link
Contributor

mollfpr commented Jan 20, 2023

@s77rt Do we really need the extra View inside the TouchableWithoutFeedback?

@cead22 Tested TouchableWithoutFeedback and it works without adding extra style. We can go with TouchableWithoutFeedback but I have concerns with the extra View.

I also notice that we have different feedback when long pressing on code and pre where it's no highlight background on pre (it's not caused by the proposal).

Screen.Recording.2023-01-20.at.08.48.09.mov

If we use TouchableWithoutFeedback without the extra View we have the same feedback highlight on code and pre.

Screen.Recording.2023-01-20.at.08.53.11.mov

@Prince-Mendiratta
Copy link
Contributor

I've got the PR ready, waiting to be assigned before creating it.

@s77rt
Copy link
Contributor

s77rt commented Jan 20, 2023

@mollfpr If we don't wrap with <View /> then the button won't work, in a sense we are applying my proposal 1. If we do wrap with <View /> the button will work leaving everything as it is just without the pointer cursor.

@s77rt
Copy link
Contributor

s77rt commented Jan 20, 2023

<TouchableWithoutFeedback /> always require a <View />. You can verify that in our App.

@Prince-Mendiratta
Copy link
Contributor

Prince-Mendiratta commented Jan 20, 2023

None of the other renderers make use of a <TouchableWithoutFeedback />. I feel that my proposal tackles this problem well without adding unnecessary complexity. Although hard coding styles is undesirable, it does give a good enough solution for this problem.

@s77rt
Copy link
Contributor

s77rt commented Jan 20, 2023

@Prince-Mendiratta Other renders do not use it because it makes sense there to use <Pressable /> e.g. the attachment widget.

@mollfpr
Copy link
Contributor

mollfpr commented Jan 20, 2023

Thanks @Prince-Mendiratta @s77rt!

Okay, after testing several times I couldn't find any issue with the View wrap and TouchableWithoutFeedback. I am more inclined to the TouchableWithoutFeedback proposal because changing the style feels hacky of course I will go with the style proposal if there's no way to fix the issue.

For the highlight issue I mentioned before, turns out the pre has the highlight is kinda delay. But this already happens before I apply the @s77rt proposal.

Screen.Recording.2023-01-20.at.17.55.35.mov

Your call @cead22

@melvin-bot
Copy link

melvin-bot bot commented Feb 3, 2023

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

If no regressions arise, payment will be issued on 2023-02-10. 🎊

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
  • Contributor that fixed the issue
  • Contributor+ that helped on the issue and/or PR

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

@melvin-bot
Copy link

melvin-bot bot commented Feb 3, 2023

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:

  • [@mollfpr / @cead22] The PR that introduced the bug has been identified. Link to the PR:
  • [@mollfpr / @cead22] 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:
  • [@mollfpr / @cead22] 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:
  • [@s77rt] Propose regression test steps to ensure the same bug will not reach production again.
  • [@arielgreen] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@s77rt
Copy link
Contributor

s77rt commented Feb 4, 2023

Regression Steps:

  1. Go to any chat
  2. Send a code-block message
  3. Hover over the message
  4. Verify that the cursor is I-beam (and not pointer)

@arielgreen
Copy link
Contributor

OOO this week -- reassigning so payment isn't held on me.

@arielgreen arielgreen removed the Bug Something is broken. Auto assigns a BugZero manager. label Feb 6, 2023
@arielgreen arielgreen assigned arielgreen and unassigned arielgreen Feb 6, 2023
@arielgreen arielgreen added the Bug Something is broken. Auto assigns a BugZero manager. label Feb 6, 2023
@melvin-bot
Copy link

melvin-bot bot commented Feb 6, 2023

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

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Feb 6, 2023
@melvin-bot
Copy link

melvin-bot bot commented Feb 6, 2023

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

@mollfpr
Copy link
Contributor

mollfpr commented Feb 7, 2023

[@mollfpr / @cead22] The PR that introduced the bug has been identified. Link to the PR:

#12987

[@mollfpr / @cead22] 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:

#12987 (comment)

@melvin-bot melvin-bot bot added the Overdue label Feb 9, 2023
@cead22
Copy link
Contributor

cead22 commented Feb 10, 2023

[ ] [@mollfpr / @cead22] 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:

@mollfpr do you want to kick off a discussion about this? Perhaps we can everyone that when working with code blocks they should always make sure the cursor is the I-beam, or maybe we can add a new item to the reviwer checklist like: if you're updating code relating to rendering a code block, make sure the cursor on code blocks is still the I-beam cursor (or is that overkill?)

Let me know what you think, and I'm also happy to start the convo in slack. Thanks!

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Overdue Daily KSv2 labels Feb 10, 2023
@mollfpr
Copy link
Contributor

mollfpr commented Feb 13, 2023

@cead22 Sorry, I missed this.

Adding a new checklist will be overkill; it’s a rare case with updating the component.

Let’s start a slack chat if you have another thoughts.

@melvin-bot melvin-bot bot removed the Overdue label Feb 13, 2023
@slafortune
Copy link
Contributor

@mollfpr @cead22 Was there a discussion started? I don't see that in Slack yet - so held off paying this out as the final step.

@mollfpr
Copy link
Contributor

mollfpr commented Feb 15, 2023

@cead22 @slafortune start a discussion on Slack!

@mollfpr
Copy link
Contributor

mollfpr commented Feb 17, 2023

@slafortune Accepted the offer, thank you!

@slafortune
Copy link
Contributor

All paid -
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests

10 participants