RocketChat / RocketChat/EmbeddedChat
feat : Keep Emoji Picker open for continuous multi-emoji selection
Nobody has claimed this yet.
- 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:
- Click the emoji button to open the picker.
- Click 1 emoji (picker closes).
- Re-click the emoji button to open the picker again.
- 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
- Open EmbeddedChat and click the Emoji icon in the toolbar.
- Select any emoji.
- Observed: The Emoji Picker closes immediately after 1 emoji is selected.
- 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)insidehandleEmojiClickprop of<EmojiPicker />. - Let the existing
Popupcomponent 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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