fix: Buttons from emoji picker misbehaving on clicks

[tassoevan]

Proposed changes (including videos or screenshots)

It updates emoji preview handling and adjusts event triggers.

An infinite render loop was preventing proper behavior when clicking on the emoji picker buttons. It was fixed by removing the unnecessary state update that was causing the loop and replacing multiple fires of the same mouseover event (when a mouseenter event was the right one to use).

Issue(s)

• CORE-2388
• ARCH-2214

Steps to test or reproduce

Further comments

There is a chance this pre-existing bug was hidden by React 18's event delegation.

Summary by CodeRabbit

• Bug Fixes
  • Fixed emoji picker click behavior by preventing an unnecessary state update that could cause unstable re-rendering.
  • Improved emoji hover behavior so previews trigger reliably on mouse entry (instead of repeatedly firing), making hover previews more consistent.
  • Ensured emoji preview state preserves the existing preview when hovering the same emoji again.
• Tests
  • Added automated coverage for emoji preview reference stability in the emoji picker provider.

[dionisio-bot]

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

[changeset-bot]

🦋 Changeset detected

Latest commit: 05a8dd8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@rocket.chat/meteor	Patch
@rocket.chat/core-typings	Patch
@rocket.chat/rest-typings	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Walkthrough

This PR updates emoji preview handling to avoid redundant state updates, switches the hover trigger to onMouseEnter, and adds a test plus changeset for the patch release.

Changes

Emoji Preview Fix

Layer / File(s)	Summary
Preview state update apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx	handlePreview now keeps the existing preview object when the incoming emoji and name match the current state, and creates a new preview object only when they differ.
Hover trigger, test, and changeset apps/meteor/client/views/composer/EmojiPicker/EmojiElement.tsx, apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx, .changeset/fifty-candies-heal.md	EmojiElement uses onMouseEnter for preview activation, the new spec verifies preview object identity behavior, and the changeset documents the patch release.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested labels: type: bug

Suggested reviewers: ggazzo

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main fix: emoji picker button click misbehavior.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cubic-dev-ai]

No issues found across 4 files

_{Re-trigger cubic}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 69.30%. Comparing base (31df377) to head (05a8dd8).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #41195      +/-   ##
===========================================
+ Coverage    69.28%   69.30%   +0.01%     
===========================================
  Files         3551     3551              
  Lines       139776   139879     +103     
  Branches     24843    24860      +17     
===========================================
+ Hits         96849    96939      +90     
- Misses       38920    38928       +8     
- Partials      4007     4012       +5     

Flag	Coverage Δ
e2e	59.36% <50.00%> (-0.01%)	⬇️
e2e-api	49.82% <ø> (+0.03%)	⬆️
unit	70.14% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[tassoevan]

/jira ARCH-2200

[coderabbitai]

🧹 Nitpick comments (1)

apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx (1)

14-14: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Nit: prefer unknown[] over any[] for the mock callback params.

Since useStableCallback is just returning the callback unmodified, (...args: unknown[]) => unknown would be more accurate typing than any[].

As per coding guidelines, **/*.{ts,tsx,js}: "Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx`
at line 14, The mock for useStableCallback in EmojiPickerProvider.spec.tsx uses
any[] for callback args, which is too loose for this pass-through stub. Update
the mock signature to use unknown[] instead of any[] so the typing stays
accurate while still returning the callback unchanged.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx`:
- Line 14: The mock for useStableCallback in EmojiPickerProvider.spec.tsx uses
any[] for callback args, which is too loose for this pass-through stub. Update
the mock signature to use unknown[] instead of any[] so the typing stays
accurate while still returning the callback unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 632e6ded-0faf-4ec4-839b-f5aa47e20b22

📥 Commits

Reviewing files that changed from the base of the PR and between 8abbdaf and 05a8dd8.

📒 Files selected for processing (1)

• apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx

📜 Review details

⏰ Context from checks skipped due to timeout. (4)

• GitHub Check: cubic · AI code reviewer
• GitHub Check: CodeQL-Build
• GitHub Check: Hacktron Security Check
• GitHub Check: CodeQL-Build

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx

🧠 Learnings (3)

📚 Learning: 2026-03-06T18:10:15.268Z

Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 39397
File: packages/gazzodown/src/code/CodeBlock.spec.tsx:47-68
Timestamp: 2026-03-06T18:10:15.268Z
Learning: In tests (especially those using testing-library/dom/jsdom) for Rocket.Chat components, the HTML <code> element has an implicit ARIA role of 'code'. Therefore, screen.getByRole('code') or screen.findByRole('code') will locate <code> elements even without a role attribute. Do not flag findByRole('code') as invalid in reviews; prefer using the implicit role instead of adding role="code" unless necessary for accessibility.

Applied to files:

• apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx

📚 Learning: 2026-03-27T14:52:56.865Z

Learnt from: dougfabris
Repo: RocketChat/Rocket.Chat PR: 39892
File: apps/meteor/client/views/room/contextualBar/Threads/Thread.tsx:150-155
Timestamp: 2026-03-27T14:52:56.865Z
Learning: In Rocket.Chat, there are two different `ModalBackdrop` components with different prop APIs. During review, confirm the import source: (1) `rocket.chat/fuselage` `ModalBackdrop` uses `ModalBackdropProps` based on `BoxProps` (so it supports `onClick` and other Box/DOM props) and does not have an `onDismiss` prop; (2) `rocket.chat/ui-client` `ModalBackdrop` uses a narrower props interface like `{ children?: ReactNode; onDismiss?: () => void }` and handles Escape keypress and outside mouse-up, and it does not forward arbitrary DOM props such as `onClick`. Flag mismatched props (e.g., `onDismiss` passed to the fuselage component or `onClick` passed to the ui-client component) and ensure the usage matches the correct component being imported.

Applied to files:

• apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx

📚 Learning: 2026-05-06T12:21:44.083Z

Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 40256
File: apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx:121-149
Timestamp: 2026-05-06T12:21:44.083Z
Learning: Field wrappers in rocket.chat/fuselage-forms (Field, FieldLabel, FieldRow, FieldError, FieldHint) auto-create htmlFor/id associations, aria-describedby, and role="alert" for errors. Do not manually set htmlFor, id, aria-describedby, or role attributes when using these wrappers. This automatic wiring does not apply to plain rocket.chat/fuselage components, which require explicit ID wiring per the accessibility docs. In code reviews, prefer using fuselage-forms wrappers for form fields and verify there is no unnecessary manual ID/aria wiring in files that use these wrappers. If a component uses plain fuselage components, ensure proper id wiring as per docs.

Applied to files:

• apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx

🔇 Additional comments (1)

apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.spec.tsx (1)

1-56: LGTM!