RocketChat / RocketChat/EmbeddedChat

feat : Keep Emoji Picker open for continuous multi-emoji selection

Open Beginner friendly
#1,360 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
165
Forks
381
Avg merge
1d 2h
Merged PRs (30d)
1

Description

Feature Description / Proposal

Currently, when selecting an emoji in the chat input toolbar, the EmojiPicker popover closes immediately after a single emoji is selected (since setEmojiOpen(false) is explicitly called inside handleEmojiClick).

If a user wants to enter multiple emojis consecutively (for example: 😀😅❤️), they currently have to:

  1. Click the emoji button to open the picker.
  2. Click 1 emoji (picker closes).
  3. Re-click the emoji button to open the picker again.
  4. Click the next emoji (picker closes again)... and repeat.

This adds unnecessary click overhead and friction when typing messages.

Proposed UX Improvement

Allow the EmojiPicker popover to remain open while selecting emojis so users can continuously pick multiple emojis without the box disappearing after each click.

The picker will close naturally when the user:

  • Clicks outside the picker popup (e.g. back into the message text field or chat window).
  • Toggles the emoji button off.
  • Sends the message.
Steps to Reproduce / Current Behavior
  1. Open EmbeddedChat and click the Emoji icon in the toolbar.
  2. Select any emoji.
  3. Observed: The Emoji Picker closes immediately after 1 emoji is selected.
  4. Expected: The Emoji Picker should stay open so the user can select multiple emojis smoothly in one go.
Code Location

In packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js:

  • Remove setEmojiOpen(false) inside handleEmojiClick prop of <EmojiPicker />.
  • Let the existing Popup component outside-click handler handle closing when clicking away.

I have already tested this improvement locally and would love to raise a PR for it! Let me know your thoughts.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js and inspect the EmojiPicker handleEmojiClick prop plus the surrounding Popup behavior. Confirm that selecting multiple emojis keeps the picker open, while clicking outside, toggling the emoji button, or sending the message still closes it.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
1/5
Estimated time
Under an hour
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
84/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.