chore: fix ReactionSelector dialog placement

src/components/MessageActions/MessageActions.tsx

@@ -13,6 +13,7 @@ import { useBaseMessageActionSetFilter, useSplitMessageActionSet } from './hooks
 import { defaultMessageActionSet } from './defaults';
 import { ActionsIcon, type MESSAGE_ACTIONS } from '../Message';
 import { Button } from '../Button';
+import { ReactionSelector } from '../Reactions';
 
 type BaseMessageActionSetItem = {
   placement: 'quick' | 'dropdown';
@@ -49,7 +50,7 @@ export const MessageActions = ({
   messageActionSet = defaultMessageActionSet,
 }: MessageActionsProps) => {
   const { theme } = useChatContext();
-  const { isMyMessage, message } = useMessageContext();
+  const { isMyMessage, message, threadList } = useMessageContext();
   const { t } = useTranslationContext();
   const [actionsBoxButtonElement, setActionsBoxButtonElement] =
     useState<HTMLSpanElement | null>(null);
@@ -64,7 +65,10 @@ export const MessageActions = ({
   );
 
   const dropdownDialogId = `message-actions--${message.id}`;
-  const reactionSelectorDialogId = `reaction-selector--${message.id}`;
+  const reactionSelectorDialogId = ReactionSelector.getReactionSelectorDialogId({
+    messageId: message.id,
+    threadList,
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dropdownDialogId });
   const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId, dialogManager?.id);
   const reactionSelectorDialogIsOpen = useDialogIsOpen(

src/components/Reactions/ReactionSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { type JSX, useMemo, useState } from 'react';
 import clsx from 'clsx';
 
 import { useDialog } from '../Dialog';
@@ -20,9 +20,17 @@ export type ReactionSelectorProps = {
   own_reactions?: ReactionResponse[];
 };
 
+interface ReactionSelectorInterface {
+  (props: ReactionSelectorProps): JSX.Element;
+  getReactionSelectorDialogId: (_: {
+    messageId: string;
+    threadList?: boolean;
+  }) => `reaction-selector${'-thread' | ''}--${string}`;
+}
+
 const stableOwnReactions: ReactionResponse[] = [];
 
-const UnMemoizedReactionSelector = (props: ReactionSelectorProps) => {
+export const ReactionSelector: ReactionSelectorInterface = (props) => {
   const { handleReaction: propHandleReaction, own_reactions: propOwnReactions } = props;
   const [extendedListOpen, setExtendedListOpen] = useState(false);
 
@@ -33,8 +41,12 @@ const UnMemoizedReactionSelector = (props: ReactionSelectorProps) => {
     closeReactionSelectorOnClick,
     handleReaction: contextHandleReaction,
     message,
+    threadList,
   } = useMessageContext('ReactionSelector');
-  const dialogId = `reaction-selector--${message.id}`;
+  const dialogId = ReactionSelector.getReactionSelectorDialogId({
+    messageId: message.id,
+    threadList,
+  });
   const dialog = useDialog({ id: dialogId });
 
   const handleReaction = propHandleReaction ?? contextHandleReaction;
@@ -136,9 +148,7 @@ const UnMemoizedReactionSelector = (props: ReactionSelectorProps) => {
   );
 };
 
-/**
- * Component that allows a user to select a reaction.
- */
-export const ReactionSelector = React.memo(
-  UnMemoizedReactionSelector,
-) as typeof UnMemoizedReactionSelector;
+ReactionSelector.getReactionSelectorDialogId = (({ messageId, threadList }) => {
+  const dialogIdNamespace = threadList ? '-thread' : '';
+  return `reaction-selector${dialogIdNamespace}--${messageId}`;
+}) satisfies ReactionSelectorInterface['getReactionSelectorDialogId'];

src/components/Reactions/ReactionSelectorWithButton.tsx

@@ -28,8 +28,10 @@ export const ReactionSelectorWithButton = ({
   const { ReactionSelector = DefaultReactionSelector } =
     useComponentContext('MessageOptions');
   const buttonRef = useRef<ElementRef<'button'>>(null);
-  const dialogIdNamespace = threadList ? '-thread-' : '';
-  const dialogId = `reaction-selector${dialogIdNamespace}--${message.id}`;
+  const dialogId = DefaultReactionSelector.getReactionSelectorDialogId({
+    messageId: message.id,
+    threadList,
+  });
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
   const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);