Reaction Picker Tail is always shown when the Reaction Picker is enabled in the default message widget

[crxm]

Which packages are you using?

stream_chat_flutter, stream_chat_persistance, stream_chat_localizations

On what platforms did you experience the issue?

iOS, Android

What version are you using?

7.1.0

What happened?

When using the default message widget to display messages, the reaction picker tail is always shown when 'showReactionPicker' is set to true. The tail should only be shown when a message has reactions. Edit: I realize that I had originally misunderstood what I was seeing. The tail is part of the message picker itself. It should never be visible in the message list at all. I do not know why this is occurring.

Disabling the reaction picker hides the tail, but that disables the ability to react to messages entirely.

I believe the issue lies in the following code in the StreamMessageWidget class:

showReactionPickerTail: widget.showReactionPicker,

Steps to reproduce

1. View any channel displaying messages using the default widget with showReactionPicker set to true.
2. Every message will have the reaction tail shown, regardless of the reaction count.

Supporting info to reproduce

No response

Relevant log output

No response

Flutter analyze output

No response

Flutter doctor output

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

This issue is stale because it has been open for 20 days with no activity.

[trevorFields]

i agree it should be hidden and only shown when the picker is open

[guplem]

We are suffering from the same issue

[guplem]

The logic of the "reaction picker tail" should be part of the _buildContextMenu() method within the StreamMessageWidget's state, not part of the MessageWidgetContent (triggered by the showReactionPickerTail parameter).

This is because it should only be shown whenever the "context menu" is shown, not always.

Personally, I would just remove that tail, since I do not like it anyways.

[deven98]

Apologies for the delay folks, I'm taking a look at this now.

[guplem]

@deven98 I've created a PR #1946 to be able to hide the visual artifact. However, it does not fix the core issue.

[deven98]

@crxm / @guplem for some reason I cannot reproduce this reaction artifact.

Could you paste a minimal example for reproduction of the error here?

Thanks!

[guplem]

@deven98 I can see it using the following code:

StreamMessageListView(
  messageBuilder: (BuildContext context, MessageDetails details, List<Message> messages, StreamMessageWidget defaultMessage) {
    return Container(
      color: Colors.grey,
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: defaultMessage.copyWith(
          showReactionPicker: true,
          // showReactionPickerTail: false, // TODO: uncomment after this issue has been solved (https://github.com/GetStream/stream-chat-flutter/issues/1879) or this PR approved: https://github.com/GetStream/stream-chat-flutter/pull/1946
        ),
      ),
    );
  },
)

I've wrapped the message with padding and added a container with color to be able to clearly see it

[deven98]

@guplem that allows me to recreate it, thanks so much!

[deven98]

Hey @crxm / @guplem, this issue should be fixed by #1953 - thanks for reporting and helping me replicate the issue.

[guplem]

Thanks, @deven98 ! Any idea about when will these latest changes going to be broadly available in a public release/update?

[deven98]

@guplem Likely sometime next week.