[HOLD for payment 2023-03-23] [$1000] Emoji reaction is not highlighted when holding it down

[kavimuru]

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:

1. Open any chat
2. Open report context menu by long press any message
3. Hold down any emoji reaction (except the "add reaction")
4. Notice there is no highlight applied to it

Expected Result:

Emoji is highlighted when holding it down

Actual Result:

There is no highlight feedback when holding down the emoji reaction

Workaround:

unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.2.81-1
Reproducible in staging?: y
Reproducible in production?: new feature
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:

331849.t.mp4

az_recorder_20230309_211853.1.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017db27f3eed1ec8c0
• Upwork Job ID: 1634195327303356416
• Last Price Increase: 2023-03-10

[MelvinBot]

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

[MelvinBot]

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

[zanyrenney]

@stitesExpensify is this perhaps one of the polish issues? I don't know if this is a bug yet, seems like polish.

[stitesExpensify]

I would say that this is a bug! I don't know that the issue is really when "holding it down" specifically, but more that there is no highlight state in general when clicking/tapping the quick emojis

[zanyrenney]

Thanks @stitesExpensify

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[bernhardoj]

Proposal

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

The emoji reaction does not give a highlight feedback when we hold it down.

What is the root cause of that problem?

We don't update the background style when it is being hold down. We only change it while hovering it, but this only work on web.

App/src/components/Reactions/EmojiReactionBubble.js

Lines 62 to 66 in 657b439

	<Pressable
	style={({hovered}) => [
	styles.emojiReactionBubble,
	StyleUtils.getEmojiReactionBubbleStyle(hovered, hasUserReacted, props.sizeScale),
	]}

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

Add pressed state alongside with hovered and pass it to the style utils, the same thing we did here for add emoji reaction.

App/src/components/Reactions/AddReactionBubble.js

Lines 83 to 91 in 657b439

	<Pressable
	ref={ref}
	style={({
	hovered,
	pressed,
	}) => [
	styles.emojiReactionBubble,
	StyleUtils.getEmojiReactionBubbleStyle(hovered || pressed, false, props.sizeScale),
	]}

[parasharrajat]

@bernhardoj 's proposal looks good to me.

cc: @amyevans

🎀 👀 🎀 C+ reviewed

[stitesExpensify]

cc @amyevans 😄 ^

[parasharrajat]

Oops 😬

[MelvinBot]

📣 @bernhardoj You have been assigned to this job by @amyevans!
Please apply to this job in Upwork 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 for review.

cc: @parasharrajat

[zanyrenney]

Payment due tomorrow.

[zanyrenney]

chatting to @amyevans about this one IRL. #15813 (comment) @parasharrajat please can you complete these tasks for the issue before we move ahead with payment?

[zanyrenney]

We don't need a regression test for this one.

[zanyrenney]

hey @parasharrajat bump on the comment above so we can progress with payment.

[parasharrajat]

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:

[@parasharrajat / @amyevans] The PR that introduced the bug has been identified. Link to the PR: This was missed from the initial implementation #15210

[@parasharrajat / @amyevans] 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. https://github.com/Expensify/App/pull/15210/files#r1152227805

[@parasharrajat / @amyevans] 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: No discussion needed. It was missed during testing.

[@parasharrajat] If we decide to create a regression test for the bug, please propose the regression test steps to the appropriate location to ensure the same bug will not reach production again.

#15813 (comment)

[parasharrajat]

Regression Test Step

1. Open any chat on Android/iOS.
2. Long press on any existing message in the chat. If there is no message send one first.
3. In the opened context menu, press and hold the quick reaction emojis.
4. Observe that it remains highlighted during the long press.

Do you agree 👍 or 👎 ?

[parasharrajat]

@zanyrenney Done. Please invite me to the job or send the offer directly. Thanks.

[MelvinBot]

@amyevans, @parasharrajat, @bernhardoj, @zanyrenney Huh... This is 4 days overdue. Who can take care of this?

[zanyrenney]

Thanks @parasharrajat - let me invite you now!

[zanyrenney]

That's all sent Rajat @parasharrajat , please accept as @bernhardoj is already hired so that's the final step before payment!

[zanyrenney]

pending waiting on youaccepting @parasharrajat - then payment will be coming your way.

[MelvinBot]

@amyevans, @parasharrajat, @bernhardoj, @zanyrenney Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@amyevans, @parasharrajat, @bernhardoj, @zanyrenney Whoops! This issue is 2 days overdue. Let's get this updated quick!

[zanyrenney]

Both have been paid now, closing!

[parasharrajat]

@zanyrenney Is it eligible for the bonus?

[parasharrajat]

Bump @zanyrenney

[parasharrajat]

Bump @zanyrenney

[zanyrenney]

merge bonus given @bernhardoj @parasharrajat