[$250] Chat - Emoji picker is not displayed correctly in resized window

[lanitochka17]

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: v9.3.59-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #87394
Email or phone of affected tester (no customers): testpayment935@gmail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Windows 11 pro /Chrome
App Component: Chat Report View

Action Performed:

1. Navigate to staging.new.expensify.com
2. Open any chat → click emoji picker button
3. On web, resize the browser while emoji picker is open using device tool bar
4. Try this multiple times
5. In resized view, click the emoji picker
6. Notice it is not displayed
7. Click device tool bar in order to see the web view
8. Notice the emoji picker is already shown
9. Click device tool bar in order to see the mobile view
10. Notice the repositioned emoji picker is shown

Expected Result:

The emoji picker should repositions correctly

Actual Result:

• In step 4, repositioned emoji picker is not constantly shown
• in step 5-10, the emojis are not shown when clicking the emoji picker until resized again

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7129170_1776120380452.bandicam_2026-04-14_01-31-13-516.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @abdulrahuman5196

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022043831658429963643
• Upwork Job ID: 2043831658429963643
• Last Price Increase: 2026-04-20

[MelvinBot]

Proposal

Problem

The emoji picker fails to display or reposition correctly when the browser window is resized across the mobile/desktop breakpoint (800px), particularly when toggling Chrome DevTools device toolbar.

Solution

The root cause is a stale closure in the Dimensions.addEventListener('change') handler at src/components/EmojiPicker/EmojiPicker.tsx:209-236.

When a resize crosses the 800px breakpoint, the Dimensions change event fires before React re-renders with the updated shouldUseNarrowLayout value. The handler captures the stale pre-resize value:

• Desktop → mobile: shouldUseNarrowLayout is still false in the closure. If the anchor ref is null (which happens because EmojiPickerButton unmounts during layout shift and nulls the ref via cleanup), the condition isEmojiPickerVisible && !shouldUseNarrowLayout is true → hideEmojiPicker() is called, making the picker disappear.
• Mobile → desktop: shouldUseNarrowLayout is still true in the closure → !shouldUseNarrowLayout is false → the handler neither hides nor repositions the picker, leaving it stuck with stale positioning.

Additionally, the Popover component switches between entirely different rendering paths at the breakpoint (PopoverWithoutOverlay portal on wide screens vs BOTTOM_DOCKED Modal on narrow screens), causing destructive unmount/remount transitions.

Note: This is a pre-existing issue, not a regression from PR #87394 (which only wrapped the picker content in a React <Activity> component).

The fix should update the Dimensions change handler to use a ref for shouldUseNarrowLayout so the callback always reads the current value rather than a stale closure capture. Specifically:

1. In EmojiPicker.tsx, add a ref that tracks shouldUseNarrowLayout:

   const shouldUseNarrowLayoutRef = useRef(shouldUseNarrowLayout);
   shouldUseNarrowLayoutRef.current = shouldUseNarrowLayout;

2. In the Dimensions.addEventListener('change') callback (line 214), read from shouldUseNarrowLayoutRef.current instead of shouldUseNarrowLayout.
3. Similarly, track isEmojiPickerVisible in a ref and read from it in the callback, so the hide check uses current state.
4. Remove isEmojiPickerVisible and shouldUseNarrowLayout from the effect's dependency array (since they're now read from refs), which also prevents the listener from being torn down and recreated on every visibility/layout change.

This ensures the handler always evaluates the current layout mode when a resize occurs, regardless of React's render timing.

Investigation details

Key files:

• src/components/EmojiPicker/EmojiPicker.tsx:209-236 — Dimension change handler with stale closure
• src/components/EmojiPicker/EmojiPicker.tsx:148-155 — onModalHide nulls anchor ref
• src/components/EmojiPicker/EmojiPickerButton.tsx:74 — Cleanup effect nulls anchor ref on unmount
• src/components/Popover/index.tsx:78-124 — Rendering path switch at breakpoint
• src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx:74-86 — shouldSkipRemeasurement prevents re-measuring after resize

Data flow during bug:

1. User opens emoji picker on desktop (>800px). Popover renders as PopoverWithoutOverlay.
2. User resizes below 800px. Dimensions change fires with stale shouldUseNarrowLayout=false.
3. Layout shift causes EmojiPickerButton to remount → cleanup nulls emojiPopoverAnchorRef.
4. Handler finds null anchor + stale values → calls hideEmojiPicker().
5. onModalHide callback nulls anchor ref again.
6. React re-renders with shouldUseNarrowLayout=true, but picker is already hidden.
7. Popover rendering switches from portal to BOTTOM_DOCKED Modal (destructive transition).
8. User clicks emoji button again → calculateAnchorPosition may get {0,0,0,0} from the recently-nulled ref.

Alternative explanations considered:

• PR decompose-composer 2: Activity for EmojiPicker and PopoverMenu #87394's <Activity> wrapper — Ruled out. The Activity component only controls rendering priority; it doesn't affect the Dimensions listener or anchor ref lifecycle.
• shouldSkipRemeasurement=true on the EmojiPicker's PopoverWithMeasuredContent — This is a contributing factor (prevents re-measuring after hide/show cycle) but is secondary to the stale closure being the trigger.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

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

[melvin-bot]

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

[trasnake87]

Proposal

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

When the browser window is resized (for example, by toggling Chrome's device toolbar) while the emoji picker was previously opened, reopening the picker renders it at the wrong position — or not at all — until the window is resized again.

What is the root cause of that problem?

The root cause is in PopoverWithMeasuredContentBase, which caches popover size/position state across open/close cycles. The React.memo comparator at https://github.com/Expensify/App/blob/main/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx#L232-L237 short-circuits and returns true (no re-render) whenever isVisible is false, so while the picker is closed, any window resize is never propagated into this component — windowWidth/windowHeight and usePrevious(prevWindowDimensions) stay frozen at pre-resize values. When the picker is reopened, the hasWindowSizeChanged guard at https://github.com/Expensify/App/blob/main/src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx#L74-L86 compares the new anchor position against stale dimensions, so it takes the "no remeasurement needed" path and renders the Popover using stale popoverWidth/popoverHeight and stale shift calculations.

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

Allow the memoized component to re-render when window dimensions change even while invisible, so usePrevious(prevWindowDimensions) and the shift calculations stay fresh:

// src/components/PopoverWithMeasuredContent/PopoverWithMeasuredContentBase.tsx
export default React.memo(PopoverWithMeasuredContentBase, (prevProps, nextProps) => {
    if (prevProps.isVisible === nextProps.isVisible && nextProps.isVisible === false) {
        // Still re-render on window size changes so cached measurements don't go stale while hidden
        if (prevProps.anchorPosition?.horizontal !== nextProps.anchorPosition?.horizontal
            || prevProps.anchorPosition?.vertical !== nextProps.anchorPosition?.vertical) {
            return false;
        }
        return true;
    }
    return circularDeepEqual(prevProps, nextProps);
});

Additionally, reset isContentMeasured when windowWidth/windowHeight change via a useEffect, so a reopen after resize forces a fresh onLayout measurement instead of reusing cached popoverHeight/popoverWidth.

[trasnake87]

Contributor details
Your Expensify account email: trasnake87@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f770315ab181656

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[yw13931835525-cyber]

👋 Hi! I'm interested in this issue. I'm an experienced developer who can deliver quality work.

**Quote: ** (competitive rate for fast turnaround)

Can I take this one? Happy to start immediately.