[HOLD for payment 2023-10-10] [HOLD for payment 2023-10-09] [$250] Chat - Console error "Cannot read properties of undefined (reading 'current')" on emoji picker

[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 the app
2. Open any report
3. Right click or long press any report and click on add reaction
4. Observe that it does nothing and throws console error: Cannot read properties of undefined (reading 'current')

Expected Result:

App should allow users to open emoji picker for reaction

Actual Result:

App does not allow users to open emoji picker for reaction on right click and click on add reaction and it throws console error

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.75.2
Reproducible in staging?: y
Reproducible in production?: n
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

mac.chrome.error.on.opening.emoji.reaction.mov

mac.desktop.native.error.on.opening.emoji.reaction.mov

ios.safari.native.error.on.opening.emoji.reaction.mov

android.native.emoji.picker.console.error.mov

android.chrome.console.error.emoji.picker.mp4

windows.chrome.console.error.emoji.picker.mp4

Recording.4810.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696079858252189

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0103f61623015d853c
• Upwork Job ID: 1708383767969234944
• Last Price Increase: 2023-10-01
• Automatic offers:
• abdulrahuman5196 | Contributor | 26964631
• dhanashree-sawant | Reporter | 26964632
• hungvu193 | Contributor | 26982014

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @johnmlee101 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[hungvu193]

Proposal

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

Nothing happens after pressing Icon to open emoji picker

What is the root cause of that problem?

It's regression from this PR
#27221
We forgot to add our contentRef to useImperativeHandle, so we can't access it via contextMenuRef.current.contentRef which caused the crash

App/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

Lines 272 to 281 in 52f0e3c

	useImperativeHandle(ref, () => ({
	showContextMenu,
	hideContextMenu,
	showDeleteModal,
	hideDeleteModal,
	isActiveReportAction,
	instanceID,
	runAndResetOnPopoverHide,
	clearActiveReportAction,
	}));

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

We should add contentRef inside useImperativeHandle

    useImperativeHandle(ref, () => ({
        showContextMenu,
        hideContextMenu,
        showDeleteModal,
        hideDeleteModal,
        isActiveReportAction,
        instanceID,
        runAndResetOnPopoverHide,
        clearActiveReportAction,
        contentRef
    }));

What alternative solutions did you explore? (Optional)

N/A

[fedirjh]

@hungvu193 Proposal makes sense, this is a regression from #27221.

[melvin-bot]

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