fix: display message actions dialogs for thread replies sent to channel (#2823)

Author: MartinCupela

src/components/Message/MessageOptions.tsx

@@ -50,9 +50,18 @@ const UnMemoizedMessageOptions = (props: MessageOptionsProps) => {
   } = useMessageContext('MessageOptions');
 
   const { t } = useTranslationContext('MessageOptions');
-  const messageActionsDialogIsOpen = useDialogIsOpen(`message-actions--${message.id}`);
+
+  // It is necessary to namespace the dialog IDs because a message with the same ID
+  // can appear in the main message list as well as in the thread message list.
+  // Without the namespace, the search for dialog would be performed by the message ID only
+  // which could return the dialog for a message in another message list (which would not be rendered).
+  const dialogIdNamespace = threadList ? '-thread-' : '';
+
+  const messageActionsDialogIsOpen = useDialogIsOpen(
+    `message-actions${dialogIdNamespace}--${message.id}`,
+  );
   const reactionSelectorDialogIsOpen = useDialogIsOpen(
-    `reaction-selector--${message.id}`,
+    `reaction-selector${dialogIdNamespace}--${message.id}`,
   );
   const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
 

src/components/MessageActions/MessageActions.tsx

@@ -83,7 +83,8 @@ export const MessageActions = (props: MessageActionsProps) => {
 
   const isMuted = useCallback(() => isUserMuted(message, mutes), [message, mutes]);
 
-  const dialogId = `message-actions--${message.id}`;
+  const dialogIdNamespace = threadList ? '-thread-' : '';
+  const dialogId = `message-actions${dialogIdNamespace}--${message.id}`;
   const dialog = useDialog({ id: dialogId });
   const dialogIsOpen = useDialogIsOpen(dialogId);
 

src/components/Reactions/ReactionSelectorWithButton.tsx

@@ -23,11 +23,12 @@ export const ReactionSelectorWithButton = ({
   ReactionIcon,
 }: ReactionSelectorWithButtonProps) => {
   const { t } = useTranslationContext('ReactionSelectorWithButton');
-  const { isMyMessage, message } = useMessageContext('MessageOptions');
+  const { isMyMessage, message, threadList } = useMessageContext('MessageOptions');
   const { ReactionSelector = DefaultReactionSelector } =
     useComponentContext('MessageOptions');
   const buttonRef = useRef<ElementRef<'button'>>(null);
-  const dialogId = `reaction-selector--${message.id}`;
+  const dialogIdNamespace = threadList ? '-thread-' : '';
+  const dialogId = `reaction-selector${dialogIdNamespace}--${message.id}`;
   const dialog = useDialog({ id: dialogId });
   const dialogIsOpen = useDialogIsOpen(dialogId);
   return (