Emoji reactions are broken in multiple ways

[graue70]

Steps to reproduce

I wrote multiple messages in a room. Five people (including me) reacted to them with three different emojis. The outcome looks like this in element-desktop:

Outcome

What did you expect?

1. I expect all emojis of the same kind (e.g. thumbs up) to be combined into one group for every message.
2. I expect at most one occurrence of one kind of emoji (e.g. thumbs up) for one person and one message.
3. I expect to be able to remove my own reaction by clicking on it.

What happened instead?

1. On the first visible message Fr, 29.10. (among others), there are three thumbs up emojis in one group and then two thumbs up emojis in another group.
2. On the first visible message Fr, 29.10. (among others), there are two thumbs up emojis from the same person. (You can't see this in the screenshot.) One of them is part of the first group of three thumbs up emojis. The other is part of the second of group of thumbs up emojis.
3. If I click on the thumbs down emoji on the last message Sa, 27.11, nothing happens.

Further information

Looking at the original event source for the first message Fr, 29.10., part of it looks like this (note that the thumbs up emojis are not combined):

"unsigned": {
    "age": 432219634,
    "m.relations": {
      "m.annotation": {
        "chunk": [
          {
            "type": "m.reaction",
            "key": "👍",
            "count": 3
          },
          {
            "type": "m.reaction",
            "key": "👍️",
            "count": 2
          },
          {
            "type": "m.reaction",
            "key": "👎️",
            "count": 1
          }
        ]
      }
    }
  },

For the last message Sa, 27.11., it looks like this (note that my thumbs down emoji isn't there):

"unsigned": {
    "age": 432175238,
    "m.relations": {
      "m.annotation": {
        "chunk": [
          {
            "type": "m.reaction",
            "key": "👍️",
            "count": 3
          },
          {
            "type": "m.reaction",
            "key": "👎",
            "count": 2
          }
        ]
      }
    }
  },

Operating system

Ubuntu 18.04.6

Application version

Element version: 1.8.4 Olm version: 3.2.3

How did you install the app?

https://element.io/get-started

Homeserver

matrix.org

Will you send logs?

No

[graue70]

Also note that some of the other four mentioned people complain about seeing only a very limited subset of the emoji reactions at all. However, they are using iOS and Android versions of the client so I didn't include those problems in this issue.

[graue70]

Also note that on a different device the situation looks exactly the same except that the two false thumbs down emojis for the last two messages do not show. The device uses Linux Mint 20.2, Element version: 1.9.0, Olm version: 3.2.3.

[t3chguy]

So the two thumbs up above are actually different, even though with most fonts they render identically.
The former is \ud83d\udc4d whereas the latter is \ud83d\udc4d\ufe0f - as per the relevant MSC https://github.com/uhoreg/matrix-doc/blob/aggregations-reactions/proposals/2677-reactions.md - the trailing \ufe0f should be sent for emoji reactions.

When sending emoji reactions, the key field should include the colourful variation-16 when applicable.

So whichever client/bot/script/whatever sent the one without \ufe0f should be updated to send better formed emoji.

[graue70]

Doing further research with your information, I suspect that this is related to #13586, #13926 and, more precise (since the weird reactions were made on mobile clients), is caused by element-hq/element-ios#3315 and element-hq/element-android#1452.

Those two issues would explain my problems 1 and 2.

That leaves problem 3 unexplained, namely, one of my desktop clients showing reactions of mine that aren't really there and that I can't remove.

Edit: Actually, today the phantom reactions don't show anymore. Might have been a caching issue?