diff --git a/src/components/Message/MessageOptions.tsx b/src/components/Message/MessageOptions.tsx index 7ab481bc0..0a280aa46 100644 --- a/src/components/Message/MessageOptions.tsx +++ b/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; diff --git a/src/components/MessageActions/MessageActions.tsx b/src/components/MessageActions/MessageActions.tsx index a9a40b988..5edf36f84 100644 --- a/src/components/MessageActions/MessageActions.tsx +++ b/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); diff --git a/src/components/Reactions/ReactionSelectorWithButton.tsx b/src/components/Reactions/ReactionSelectorWithButton.tsx index 07fb7a090..cbad7f9dd 100644 --- a/src/components/Reactions/ReactionSelectorWithButton.tsx +++ b/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>(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 (