Emoji is inserted at the wrong place

[Moin]

While the emoji autocomplete does not work when you add a colon behind a letter, it offers emojis when you do the same after a punctuation mark (like _ - : ; . , ). But when you use the autocomplete, the emoji is inserted at the beginning, replacing the first letter, and not at the position you were typing.

I first noticed it in chat, but the topic composer behaves the same.

[sam (Sam Saffron)]

I can no longer repro this, I believe @kelv fixed it.

[Moin]

I can still reproduce this.

I typed:

Let’s write some text, and add an emoji

And then I tried to add an emoji behind the comma.

[sam (Sam Saffron)]

Is this only an iOS thing? Are other browsers impacted?

[Moin]

I don’t know if it’s an iOS thing. It’s definitely not limited to iOS because I don’t own an iOS device.
The latest repro is on my Android tablet using Firefox. (I just checked it’s the same in Chrome)

Based on the filename, time of the report, and the fact that there is no onscreen keyboard in the OP, that was probably Edge on Windows 10.

[Richie (Richie Rich)]

I just came here to report this issue @Moin

iPadOS 18.7.1 with Safari here if it helps @sam

Also seeing another issue when highlighting text to quote it on iPad, the Discourse “quote” popup is now hidden behind the iOS “copy paste” so you can never click on it. I’ll try and work out the steps to replicate and report it separately later in the week (unless anyone beats me to it). Mentioning it here as possibly related because both issues only appeared this week.

[Moin]

@Richie

Mentioning it here as possibly related because both issues only appeared this week.

Then I am not sure your issue is the same as mine. The misplacement of the emoji after a punctuation mark is something that has happened for 1.5 years now.

[sam (Sam Saffron)]

Oh I get it, this fixes it:

diff --git a/frontend/discourse/app/modifiers/d-autocomplete.js b/frontend/discourse/app/modifiers/d-autocomplete.js
index e49fc0ec53..33fb51a1f4 100644
--- a/frontend/discourse/app/modifiers/d-autocomplete.js
+++ b/frontend/discourse/app/modifiers/d-autocomplete.js
@@ -599,10 +599,19 @@ export default class DAutocompleteModifier extends Modifier {
         prev = this.getValue()[caretPos - 1];
         const shouldTrigger = await this.shouldTrigger({ backSpace });
 
-        if (
-          shouldTrigger &&
-          (prev === undefined || this.ALLOWED_LETTERS_REGEXP.test(prev))
-        ) {
+        // For emoji autocomplete (key === ':'), use a more permissive check that includes
+        // common punctuation like comma, period, etc. that can appear before emoji
+        let isAllowed;
+        if (this.options.key === ":") {
+          // Match the same characters allowed in emoji autocomplete's onKeyUp regex
+          isAllowed =
+            prev === undefined || /[\s.?,@/#!%&*;:\[\]{}=\-_()+]/.test(prev);
+        } else {
+          isAllowed =
+            prev === undefined || this.ALLOWED_LETTERS_REGEXP.test(prev);
+        }
+
+        if (shouldTrigger && isAllowed) {
           start = caretPos;
           term = this.getValue().substring(caretPos + 1, initialCaretPos);
           end = caretPos + term.length;

@kelv I am not super familiar with how this code evolved, perhaps some of this rings a bell with some of the porting you did recently?

[kelv (Kelvin T)]

It’s not related to the porting, I just repro’d it on an older instance (3.5.0.beta8-dev) with the new floatkit-based autocomplete toggled off. Seems to be a caret positioning bug that’s been there for some time. I’ll still look into a proper fix, but shouldn’t be a blocker for the full removal of the old autocomplete library.

[Moin]

I just lost a whole chat message after I added an emoji.

I typed the message, typed the colon and two letters to get suggestions, clicked more and an emoji, and then the whole message was gone. Is this a different bug or related? So far, I couldn’t reproduce it in the composer, only in chat. And only on my laptop, not on my tablet.

[sam (Sam Saffron)]

Yeah its the boundary detection bug, we are getting confused about where emojis can start and end.

The tricky thing here is that maybe the whole logic is wrong, I wonder why it even needs to make this kind of decision given it knows exactly where the cursor is and how many letters we passed on to emoji autocomplete. Maybe just work back N chars and then replace that… not sure.

[kelv (Kelvin T)]

Oof, that’s a different bug, because I just patched the earlier type of issue with an emoji insert right after punctuation (FIX: emojis should insert right after punctuation correctly by tyb-talks · Pull Request #35830 · discourse/discourse · GitHub) which is not yet deployed here to Meta.

Similarly, this has been there for a while, and I can confirm it’s only happening in chat. Will park some time for this too.

[Moin]

@kelv

just patched the earlier type of issue with an emoji insert right after punctuation (FIX: emojis should insert right after punctuation correctly by tyb-talks · Pull Request #35830 · discourse/discourse · GitHub)

Thank you. It works fabulously.

[kelv (Kelvin T)]

This is now fixed as of FIX: emoji picker autocomplete in chat replaces entire draft by tyb-talks · Pull Request #36017 · discourse/discourse · GitHub . Thanks for the report