[PAID] [$250] Chat - Two emoji skin tones are displayed after changing tone in browser

[lanitochka17]

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.65-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Preconditions: Account is created and user is logged in both in app and mWeb

1. Open New Expensify app
2. Go to any chat and select emoji picker
3. Change the skin tone
4. Change the skin tone that is currently selected
5. Open mWeb https://staging.new.expensify.com/
6. Go to the chat as in step 2
7. Select a different skin tone in the mWeb
8. Navigate to android app and select emoji picker

Expected Result:

The last skin tone should be selected

Actual Result:

Two skin tones are displayed in the mobile app: the original selection from the app and the updated selection from the browser

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6661609_1731344323925.recording_20241111_175747.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863719314516934466
• Upwork Job ID: 1863719314516934466
• Last Price Increase: 2024-12-02
• Automatic offers:
• rayane-djouah | Reviewer | 105228437
• nyomanjyotisa | Contributor | 105228439

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (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.

[nyomanjyotisa]

Proposal

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

Chat - Two emoji skin tones are displayed after changing tone in browser

What is the root cause of that problem?

We highlight if equals to highlightedIndex or currentSkinTone.skinTone

App/src/components/EmojiPicker/EmojiSkinToneList.tsx

Line 69 in 3611198

isHighlighted={skinToneEmoji.skinTone === highlightedIndex || skinToneEmoji.skinTone === currentSkinTone.skinTone}

On updateSelectedSkinTone we set the highlighted Index

App/src/components/EmojiPicker/EmojiSkinToneList.tsx

Lines 31 to 34 in 3611198

	function updateSelectedSkinTone(skinToneEmoji: SkinToneEmoji) {
	setHighlightedIndex(skinToneEmoji.skinTone);
	setPreferredSkinTone(skinToneEmoji.skinTone);
	}

When changed in other platform, the currentSkinTone.skinTone got changed to the one selected on other platform, but the highlightedIndex is still the previous one that selected on this platform

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

Remove this code

App/src/components/EmojiPicker/EmojiSkinToneList.tsx

Line 32 in 3611198

setHighlightedIndex(skinToneEmoji.skinTone);

What alternative solutions did you explore? (Optional)

Or set the highlightedIndex with the new currentSkinTone.skinTone

    useEffect(() => {
        setHighlightedIndex(currentSkinTone.skinTone);
    }, [currentSkinTone]);

[melvin-bot]

@strepanier03 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@strepanier03 Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@strepanier03 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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

[melvin-bot]

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

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[strepanier03]

I'm able to reproduce this as long as the emoji picker is not closed on either platform while reproducing.

[melvin-bot]

@strepanier03 @rayane-djouah this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[rayane-djouah]

Reviewing

[rayane-djouah]

@nyomanjyotisa removing setHighlightedIndex(skinToneEmoji.skinTone) will cause a bug:

Before removing setHighlightedIndex(skinToneEmoji.skinTone)	After removing setHighlightedIndex(skinToneEmoji.skinTone)
android_native.mp4	android_native.mp4

[rayane-djouah]

What alternative solutions did you explore? (Optional)

Or set the highlightedIndex with the new currentSkinTone.skinTone

    useEffect(() => {
        setHighlightedIndex(currentSkinTone.skinTone);
    }, [currentSkinTone]);

@nyomanjyotisa - I prefer this alternative solution. but let's use currentSkinTone.skinTone as a useEffect dependency instead of currentSkinTone.

[rayane-djouah]

@nyomanjyotisa's proposal looks good to me

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @rayane-djouah 🎉 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]

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

[nyomanjyotisa]

The PR is ready @rayane-djouah

[melvin-bot]

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

[melvin-bot]

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

• Fix: Two emoji skin tones are displayed after changing tone in browser #53744

If no regressions arise, payment will be issued on 2024-12-19. 🎊

For reference, here are some details about the assignees on this issue:

• @nyomanjyotisa requires payment automatic offer (Contributor)
• @rayane-djouah requires payment automatic offer (Reviewer)

[melvin-bot]

@rayane-djouah @strepanier03 @rayane-djouah The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[rayane-djouah]

BugZero Checklist:

• Classify the bug:

  Bug classification

  Source of bug:

  • 1a. Result of the original design (eg. a case wasn't considered)
  • 1b. Mistake during implementation
  • 1c. Backend bug
  • 1z. Other:

  Where bug was reported:

  • 2a. Reported on production
  • 2b. Reported on staging (deploy blocker)
  • 2c. Reported on a PR
  • 2z. Other:

  Who reported the bug:

  • 3a. Expensify user
  • 3b. Expensify employee
  • 3c. Contributor
  • 3d. QA
  • 3z. Other:

• 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: https://github.com/Expensify/App/pull/12860/files#r1883724802

• If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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

• If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [@strepanier03] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue: https://github.com/Expensify/Expensify/issues/454938

Regression Test Proposal

#### Precondition:

- N/A

#### Test:

1. Go to any chat and select emoji picker
2. Change the skin tone that is currently selected
3. Open another platform version (e.g. mWeb version)
4. Go to the same chat as in step 1
5. Select a different skin tone on the other platform (from step 4)
6. Navigate back to the original platform and open the emoji picker
7. Verify that the selected emoji skin tone is set to only one, not two

Do we agree 👍 or 👎

[strepanier03]

Payment Summary

• $250 @nyomanjyotisa via Upwork
• $250 @rayane-djouah via Upwork

[strepanier03]

I've paid and closed both contracts, plus I've made the reg test GH. Closing this out.