[HOLD for payment 2023-08-16] [$1000] Web - Wrong position of emoji picker modal

[kbecciv]

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. Hover over any posted comment and right click on it to open the context menu
3. Click on the emoji picker icon inside the context menu and observe its position
4. Click anywhere on the screen to close the modal and hover over the last posted comment again
5. Click on the emoji picker icon from the hovered context menu
6. Click anywhere on the screen to close the modal
7. Right click on the posted comment
8. Click on the emoji picker icon and observe its position

Expected Result:

Emoji picker modal should be positioned relative to the posted comment

Actual Result:

Emoji picker modal opens in a wrong position if user opens the emoji picker first through the hovered context menu and then through the context menu that shows up after right clicking

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.3.46-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: Any additional supporting documentation

2023-07-26.20.10.07.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Nathan-Mulugeta
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690391720140069

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015bed1297bbb40f08
• Upwork Job ID: 1684617866837065728
• Last Price Increase: 2023-08-03
• Automatic offers:
• Nathan-Mulugeta | Reporter | 25935178

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

Web - Wrong position of emoji picker modal

What is the root cause of that problem?

The value of emojiPopoverAnchorOrigin is set as a ref and changing its current origin doesn't re-renders the component with latest anchor origin.
https://github.com/Expensify/App/blob/f3196c13308e79bb8103c4bb3de2c534a3913c70/src/components/EmojiPicker/EmojiPicker.js#L31C3-L31C3

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

We can initialize emojiPopoverAnchorOrigin using useState, like emojiPopoverAnchorPosition, so whenever it's value changes it can re-render the componet.

const [emojiPopoverAnchorOrigin, setEmojiPopoverAnchorOrigin] = useState(DEFAULT_ANCHOR_ORIGIN);

calculateAnchorPosition(emojiPopoverAnchor.current).then((value) => {
    onWillShow();
    setIsEmojiPickerVisible(true);
    setEmojiPopoverAnchorPosition(value);
    emojiPopoverAnchorOrigin.current = anchorOrigin || DEFAULT_ANCHOR_ORIGIN; **// Remove this**
    setEmojiPopoverAnchorOrigin(anchorOrigin || DEFAULT_ANCHOR_ORIGIN); **// Add this**
    setReportAction(reportActionValue);
});

After changes

emoji_picker_position_min.mp4

Test

[pradeepmdk]

Proposal

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

Web - Wrong position of emoji picker modal

What is the root cause of that problem?

emojiPopoverAnchorOrigin is a ref. it's having a reference value. so the component doesn't trigger the re-render.

App/src/components/EmojiPicker/EmojiPicker.js

Line 61 in f3196c1

emojiPopoverAnchorOrigin.current = anchorOrigin || DEFAULT_ANCHOR_ORIGIN;

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

Option1: we need to switch to use state emojiPopoverAnchorOrigin

//const emojiPopoverAnchorOrigin = useRef(DEFAULT_ANCHOR_ORIGIN);
const [emojiPopoverAnchorOrigin, setEmojiPopoverAnchorOrigin] = useState(DEFAULT_ANCHOR_ORIGIN);

option2: we need force re-render. L61 move to L59 it will work. because after ref data changes use state will trigger on setEmojiPopoverAnchorPosition this value has been used in PopoverWithMeasuredContent

App/src/components/EmojiPicker/EmojiPicker.js

Line 154 in f3196c1

anchorPosition={{

App/src/components/PopoverWithMeasuredContent.js

Line 127 in f3196c1

}, [props.anchorPosition, props.anchorAlignment, popoverWidth, popoverHeight]);

so component also get updated value and the memo also updated based on that value.

updated code for Result:

After changes

Screen.Recording.2023-07-28.at.12.35.32.PM.mov

[Krishna2323]

@puneetlath, can you pls review my proposal.