[FIX] Reaction buttons not behaving properly (#18832)

app/reactions/client/init.js

@@ -10,15 +10,27 @@ import { EmojiPicker } from '../../emoji';
 import { tooltip } from '../../ui/client/components/tooltip';
 
 Template.room.events({
-	'click .add-reaction, click [data-message-action="reaction-message"]'(event) {
+	'click .add-reaction'(event, instance) {
 		event.preventDefault();
 		event.stopPropagation();
 		const data = Blaze.getData(event.currentTarget);
-		const { msg: { rid, _id: mid } } = messageArgs(data);
+		const { msg: { rid, _id: mid, private: isPrivate } } = messageArgs(data);
 		const user = Meteor.user();
 		const room = Rooms.findOne({ _id: rid });
 
-		if (roomTypes.readOnly(room._id, user._id)) {
+		if (!room) {
+			return false;
+		}
+
+		if (!instance.subscription.get()) {
+			return false;
+		}
+
+		if (isPrivate) {
+			return false;
+		}
+
+		if (roomTypes.readOnly(room._id, user._id) && !room.reactWhenReadOnly) {
 			return false;
 		}
 

app/ui-message/client/message.html

@@ -218,9 +218,11 @@
 						</span>
 					</li>
 				{{/each}}
-				<li class="add-reaction">
-					<span class="icon-people-plus"></span>
-				</li>
+				{{#unless hideAddReaction}}
+					<li class="add-reaction">
+						<span class="icon-people-plus"></span>
+					</li>
+				{{/unless}}
 			</ul>
 			{{/unless}}
 		{{/unless}}

app/ui-message/client/message.js

@@ -323,6 +323,25 @@ Template.message.helpers({
 			return 'hidden';
 		}
 	},
+	hideAddReaction() {
+		const { room, u, msg, subscription } = this;
+
+		if (!room) {
+			return true;
+		}
+
+		if (!subscription) {
+			return true;
+		}
+
+		if (msg.private) {
+			return true;
+		}
+
+		if (roomTypes.readOnly(room._id, u._id) && !room.reactWhenReadOnly) {
+			return true;
+		}
+	},
 	hideMessageActions() {
 		const { msg } = this;