UX: replace partially written emoji when using picker on chat (#30517)

After searching for an emoji through the autocomplete, when a user uses the emoji picker (to see the full list of emojis) and selects one, the content in the chat composer would contain both the partially written emoji and the full :selected_emoji: code.

The actual fix is just re-using the emojiSelected method from TextManipulation.
This commit is contained in:
Renato Atilio 2025-01-02 12:29:18 -03:00 committed by GitHub
parent d270cef08e
commit eb58623b11
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 15 additions and 1 deletions

View File

@ -377,7 +377,7 @@ export default class ChatComposer extends Component {
onSelectEmoji(emoji) {
const code = `:${emoji}:`;
this.chatEmojiReactionStore.track(code);
this.composer.textarea.addText(this.composer.textarea.getSelected(), code);
this.composer.textarea.emojiSelected(emoji);
if (this.site.desktopView) {
this.composer.focus();

View File

@ -116,4 +116,8 @@ export default class TextareaInteractor extends EmberObject {
isInside() {
return this.textManipulation.isInside(...arguments);
}
emojiSelected(code) {
this.textManipulation.emojiSelected(code);
}
}

View File

@ -76,6 +76,16 @@ RSpec.describe "Chat composer", type: :system do
expect(page).to have_selector(".chat-emoji-picker [data-emoji='fr']")
expect(page).to have_no_selector(".chat-emoji-picker [data-emoji='grinning']")
end
it "replaces the partially typed emoji with the selected" do
chat_page.visit_channel(channel_1)
find(".chat-composer__input").fill_in(with: "hey :gri")
click_link(I18n.t("js.composer.more_emoji"))
find("[data-emoji='grimacing']").click(wait: 0.5)
expect(channel_page.composer.value).to eq("hey :grimacing:")
end
end
context "when typing on keyboard" do