feat: integrate DialogAnchor into ContextMenu to keep stable position to reference element

Author: MartinCupela

src/components/Dialog/base/ContextMenu.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, {
   type ComponentProps,
   type ComponentType,
@@ -10,6 +11,9 @@ import React, {
 } from 'react';
 import clsx from 'clsx';
 import { IconChevronLeft } from '../../Icons';
+import { useDialogIsOpen } from '../hooks';
+import type { DialogAnchorProps } from '../service/DialogAnchor';
+import { DialogAnchor } from '../service/DialogAnchor';
 
 export const ContextMenuBackButton = ({
   children,
@@ -96,7 +100,7 @@ type ContextMenuLevel = {
   menuClassName?: string;
 };
 
-export type ContextMenuProps = Omit<ComponentProps<'div'>, 'children'> & {
+type ContextMenuBaseProps = Omit<ComponentProps<'div'>, 'children'> & {
   backLabel?: ReactNode;
   items: ContextMenuItemComponent[];
   Header?: ContextMenuHeaderComponent;
@@ -106,7 +110,24 @@ export type ContextMenuProps = Omit<ComponentProps<'div'>, 'children'> & {
   onMenuLevelChange?: (level: number) => void;
 };
 
-export const ContextMenu = ({
+/** When provided, ContextMenu renders inside DialogAnchor and wires menu level for submenu alignment. */
+type ContextMenuAnchorProps = Partial<
+  Pick<
+    DialogAnchorProps,
+    | 'id'
+    | 'dialogManagerId'
+    | 'placement'
+    | 'referenceElement'
+    | 'tabIndex'
+    | 'trapFocus'
+    | 'allowFlip'
+    | 'focus'
+  >
+>;
+
+export type ContextMenuProps = ContextMenuBaseProps & ContextMenuAnchorProps;
+
+function ContextMenuContent({
   backLabel = 'Back',
   className,
   Header,
@@ -116,7 +137,7 @@ export const ContextMenu = ({
   onClose,
   onMenuLevelChange,
   ...props
-}: ContextMenuProps) => {
+}: ContextMenuBaseProps) {
   const rootLevel = useMemo<ContextMenuLevel>(
     () => ({
       Header,
@@ -207,4 +228,65 @@ export const ContextMenu = ({
       </ContextMenuRoot>
     </ContextMenuContext.Provider>
   );
+}
+
+export const ContextMenu = (props: ContextMenuProps) => {
+  const {
+    allowFlip,
+    dialogManagerId,
+    focus,
+    id,
+    placement,
+    referenceElement,
+    tabIndex,
+    trapFocus,
+    ...menuProps
+  } = props;
+
+  const isAnchored = id != null;
+
+  const [menuLevel, setMenuLevel] = useState(1);
+  const open = useDialogIsOpen(id ?? '', dialogManagerId);
+
+  useEffect(() => {
+    if (isAnchored && !open) setMenuLevel(1);
+  }, [isAnchored, open]);
+
+  const content = (
+    <ContextMenuContent
+      {...menuProps}
+      onMenuLevelChange={isAnchored ? setMenuLevel : menuProps.onMenuLevelChange}
+    />
+  );
+
+  if (isAnchored) {
+    const {
+      backLabel: _b,
+      Header: _h,
+      items: _i,
+      ItemsWrapper: _w,
+      menuClassName: _m,
+      onClose: _c,
+      onMenuLevelChange: _l,
+      ...anchorDivProps
+    } = menuProps;
+    return (
+      <DialogAnchor
+        allowFlip={allowFlip}
+        dialogManagerId={dialogManagerId}
+        focus={focus}
+        id={id}
+        placement={placement}
+        referenceElement={referenceElement}
+        tabIndex={tabIndex}
+        trapFocus={trapFocus}
+        updateKey={menuLevel}
+        {...anchorDivProps}
+      >
+        {content}
+      </DialogAnchor>
+    );
+  }
+
+  return content;
 };

src/components/Dialog/service/DialogAnchor.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ComponentProps, PropsWithChildren } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { DialogPortalEntry } from './DialogPortal';
 import { useDialog, useDialogIsOpen } from '../hooks';
@@ -29,22 +29,33 @@ export function useDialogAnchor<T extends HTMLElement>({
     placement,
   });
 
+  // Freeze reference when dialog opens so submenus (e.g. ContextMenu level 2+) stay aligned to the original anchor
+  const frozenReferenceRef = useRef<HTMLElement | null>(null);
+  if (open && referenceElement && !frozenReferenceRef.current) {
+    frozenReferenceRef.current = referenceElement;
+  }
+  if (!open) {
+    frozenReferenceRef.current = null;
+  }
+  const effectiveReference = open ? frozenReferenceRef.current : referenceElement;
+
   useEffect(() => {
-    refs.setReference(referenceElement);
-  }, [referenceElement, refs]);
+    refs.setReference(effectiveReference);
+  }, [effectiveReference, refs]);
 
   useEffect(() => {
     refs.setFloating(popperElement);
   }, [popperElement, refs]);
 
   useEffect(() => {
-    if (open && popperElement) {
+    if (open && popperElement && effectiveReference) {
+      // Re-run when reference becomes available (e.g. after ref is set) or when updateKey changes (e.g. submenu open)
       // Since the popper's reference element might not be (and usually is not) visible
       // all the time, it's safer to force popper update before showing it.
       // update is non-null only if popperElement is non-null
       update?.();
     }
-  }, [open, placement, popperElement, update, updateKey]);
+  }, [open, placement, popperElement, update, updateKey, effectiveReference]);
 
   if (popperElement && !open) {
     setPopperElement(null);
@@ -83,6 +94,7 @@ export const DialogAnchor = ({
 }: DialogAnchorProps) => {
   const dialog = useDialog({ dialogManagerId, id });
   const open = useDialogIsOpen(id, dialogManagerId);
+
   const { setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
     allowFlip,
     open,

src/components/MessageActions/MessageActions.tsx

@@ -6,7 +6,6 @@ import {
   ContextMenu,
   type ContextMenuItemComponent,
   type ContextMenuItemProps,
-  DialogAnchor,
   useDialogIsOpen,
   useDialogOnNearestManager,
 } from '../Dialog';
@@ -117,25 +116,20 @@ export const MessageActions = ({
             <ActionsIcon className='str-chat__message-action-icon' />
           </Button>
 
-          <DialogAnchor
+          <ContextMenu
+            backLabel={t('Back')}
+            className={clsx('str-chat__message-actions-box', {
+              'str-chat__message-actions-box--open': dropdownDialogIsOpen,
+            })}
             dialogManagerId={dialogManager?.id}
             id={dropdownDialogId}
+            items={contextMenuItems}
+            onClose={dialog?.close}
             placement={isMyMessage() ? 'top-end' : 'top-start'}
             referenceElement={actionsBoxButtonElement}
             tabIndex={-1}
             trapFocus
-          >
-            <ContextMenu
-              backLabel={t('Back')}
-              className={clsx(
-                'str-chat__message-actions-box',
-                { 'str-chat__message-actions-box--open': dropdownDialogIsOpen },
-                'str-chat__dialog-menu',
-              )}
-              items={contextMenuItems}
-              onClose={dialog?.close}
-            />
-          </DialogAnchor>
+          />
         </>
       )}
       {quickActionSet.map(({ Component: QuickActionComponent, type }) => (

src/components/MessageInput/AttachmentSelector/AttachmentSelector.tsx

@@ -17,7 +17,6 @@ import {
   type ContextMenuItemProps,
   type ContextMenuOpenSubmenuParams,
   type ContextMenuSubmenu,
-  DialogAnchor,
   useDialogIsOpen,
   useDialogOnNearestManager,
 } from '../../Dialog';
@@ -329,7 +328,6 @@ export const AttachmentSelector = ({
   const closeModal = useCallback(() => setModalContentActionAction(undefined), []);
 
   const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);
-  const [menuLevel, setMenuLevel] = useState(1);
   const menuButtonRef = useRef<HTMLButtonElement>(null);
 
   const contextMenuItems = useMemo(
@@ -378,25 +376,20 @@ export const AttachmentSelector = ({
           onClick={() => menuDialog?.toggle()}
           ref={menuButtonRef}
         />
-        <DialogAnchor
+        <ContextMenu
           allowFlip
+          backLabel={t('Back')}
+          className='str-chat__attachment-selector-actions-menu'
+          data-testid='attachment-selector-actions-menu'
           dialogManagerId={dialogManager?.id}
           id={menuDialogId}
+          items={contextMenuItems}
+          onClose={menuDialog.close}
           placement='top-start'
           referenceElement={menuButtonRef.current}
           tabIndex={-1}
           trapFocus
-          updateKey={menuLevel}
-        >
-          <ContextMenu
-            backLabel={t('Back')}
-            className='str-chat__attachment-selector-actions-menu str-chat__dialog-menu'
-            data-testid='attachment-selector-actions-menu'
-            items={contextMenuItems}
-            onClose={menuDialog.close}
-            onMenuLevelChange={setMenuLevel}
-          />
-        </DialogAnchor>
+        />
         <Portal
           getPortalDestination={getModalPortalDestination ?? getDefaultPortalDestination}
           isOpen={modalIsOpen}