search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.57k stars 2.91k forks source link

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

Open lanitochka17 opened 13 hours ago

lanitochka17 commented 13 hours ago

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com 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?

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/80d23ab3-6a86-4308-9119-f87a37df2999

06-343

View all open jobs on GitHub

melvin-bot[bot] commented 13 hours ago

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 commented 12 hours ago

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 https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/EmojiPicker/EmojiSkinToneList.tsx#L69

On updateSelectedSkinTone we set the highlighted Index https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/EmojiPicker/EmojiSkinToneList.tsx#L31-L34

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 https://github.com/Expensify/App/blob/3611198a932189628b23128f9f6888e200605298/src/components/EmojiPicker/EmojiSkinToneList.tsx#L32

What alternative solutions did you explore? (Optional)

Or set the highlightedIndex with the new currentSkinTone.skinTone

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