[popover2] fix(ContextMenu2): simpler target positioning logic

packages/core/src/common/classes.ts

@@ -78,7 +78,10 @@ export const LIST_UNSTYLED = `${NS}-list-unstyled`;
 export const RTL = `${NS}-rtl`;
 
 // layout utilities
-/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block */
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+ * @deprecated this is no longer needed for ContextMenu2, will be removed in v4.0
+ */
 export const FIXED_POSITIONING_CONTAINING_BLOCK = `${NS}-fixed-positioning-containing-block`;
 
 // components

packages/core/src/components/collapse/collapse.tsx

@@ -185,9 +185,6 @@ export class Collapse extends AbstractPureComponent2<CollapseProps, ICollapseSta
             transition: isAutoHeight ? "none" : undefined,
         };
 
-        // in order to give hints to child elements which rely on CSS fixed positioning, we need to apply a class
-        // to the element which creates a new containing block with a non-empty `transform` property
-        // see https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
         const contentsStyle = {
             // only use heightWhenOpen while closing
             transform: displayWithTransform ? "translateY(0)" : `translateY(-${this.state.heightWhenOpen}px)`,
@@ -202,7 +199,7 @@ export class Collapse extends AbstractPureComponent2<CollapseProps, ICollapseSta
                 style: containerStyle,
             },
             <div
-                className={classNames(Classes.COLLAPSE_BODY, Classes.FIXED_POSITIONING_CONTAINING_BLOCK)}
+                className={Classes.COLLAPSE_BODY}
                 ref={this.contentsRefHandler}
                 style={contentsStyle}
                 aria-hidden={!isContentVisible && this.props.keepChildrenMounted}

packages/core/src/components/tree/_tree.scss

@@ -54,12 +54,6 @@ $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;
       }
     }
   }
-
-  &.#{$ns}-fixed-positioning-containing-block {
-    // use the same transform as the Collapse component, to mimic the behavior of creating a new
-    // containing block for children which are position: fixed (like ContextMenu2 targets)
-    transform: translateY(0);
-  }
 }
 
 .#{$ns}-tree-node-list {

packages/core/src/components/tree/tree.tsx

@@ -97,7 +97,7 @@ export class Tree<T = {}> extends React.Component<TreeProps<T>> {
 
     public render() {
         return (
-            <div className={classNames(Classes.TREE, Classes.FIXED_POSITIONING_CONTAINING_BLOCK, this.props.className)}>
+            <div className={classNames(Classes.TREE, this.props.className)}>
                 {this.renderNodes(this.props.contents, [], Classes.TREE_ROOT)}
             </div>
         );

packages/popover2/src/contextMenu2.tsx

@@ -20,6 +20,7 @@ import * as React from "react";
 import {
     Classes as CoreClasses,
     IOverlayLifecycleProps,
+    Portal,
     Props,
     Utils as CoreUtils,
     mergeRefs,
@@ -69,9 +70,6 @@ export interface ContextMenu2ChildrenProps {
 
     /** Popover element rendered by ContextMenu, used to establish a click target to position the menu */
     popover: JSX.Element | undefined;
-
-    /** DOM ref for the context menu target, used to calculate menu position on the page */
-    ref: React.Ref<any>;
 }
 
 export interface ContextMenu2Props
@@ -130,10 +128,12 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = React.forwardRef<any, C
         tagName = "div",
         ...restProps
     } = props;
+
+    // click target offset relative to the viewport (e.clientX/clientY), since the target will be rendered in a Portal
     const [targetOffset, setTargetOffset] = React.useState<Offset | undefined>(undefined);
+    // hold a reference to the click mouse event to pass to content/child render functions
     const [mouseEvent, setMouseEvent] = React.useState<React.MouseEvent<HTMLElement>>();
     const [isOpen, setIsOpen] = React.useState<boolean>(false);
-    const containerRef = React.useRef<HTMLDivElement>(null);
 
     // If disabled prop is changed, we don't want our old context menu to stick around.
     // If it has just been enabled (disabled = false), then the menu ought to be opened by
@@ -155,11 +155,13 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = React.forwardRef<any, C
     const targetRef = React.useRef<HTMLDivElement>(null);
     const renderTarget = React.useCallback(
         ({ ref }: Popover2TargetProps) => (
-            <div
-                className={Classes.CONTEXT_MENU2_POPOVER2_TARGET}
-                style={targetOffset}
-                ref={mergeRefs(ref, targetRef)}
-            />
+            <Portal>
+                <div
+                    className={Classes.CONTEXT_MENU2_POPOVER2_TARGET}
+                    style={targetOffset}
+                    ref={mergeRefs(ref, targetRef)}
+                />
+            </Portal>
         ),
         [targetOffset],
     );
@@ -214,14 +216,13 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = React.forwardRef<any, C
                 e.preventDefault();
                 e.persist();
                 setMouseEvent(e);
-                const { left, top } = getContainingBlockOffset(containerRef.current);
-                setTargetOffset({ left: e.clientX - left, top: e.clientY - top });
+                setTargetOffset({ left: e.clientX, top: e.clientY });
                 setIsOpen(true);
             }
 
             onContextMenu?.(e);
         },
-        [containerRef.current, onContextMenu, disabled],
+        [onContextMenu, disabled],
     );
 
     const containerClassName = classNames(className, Classes.CONTEXT_MENU2);
@@ -232,15 +233,14 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = React.forwardRef<any, C
             contentProps,
             onContextMenu: handleContextMenu,
             popover: maybePopover,
-            ref: containerRef,
         });
     } else {
         return React.createElement(
             tagName,
             {
                 className: containerClassName,
                 onContextMenu: handleContextMenu,
-                ref: mergeRefs(containerRef, userRef),
+                ref: userRef,
                 ...restProps,
             },
             maybePopover,
@@ -250,16 +250,6 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = React.forwardRef<any, C
 });
 ContextMenu2.displayName = "Blueprint.ContextMenu2";
 
-function getContainingBlockOffset(targetElement: HTMLElement | null | undefined): { left: number; top: number } {
-    if (targetElement != null) {
-        const containingBlock = targetElement.closest(`.${CoreClasses.FIXED_POSITIONING_CONTAINING_BLOCK}`);
-        if (containingBlock != null) {
-            return containingBlock.getBoundingClientRect();
-        }
-    }
-    return { left: 0, top: 0 };
-}
-
 function getPopoverKey(targetOffset: Offset | undefined) {
     return targetOffset === undefined ? "default" : `${targetOffset.left}x${targetOffset.top}`;
 }

packages/popover2/test/contextMenu2Tests.tsx

@@ -104,7 +104,6 @@ describe("ContextMenu2", () => {
                         <div
                             className={classNames(ctxMenuProps.className, TARGET_CLASSNAME)}
                             onContextMenu={ctxMenuProps.onContextMenu}
-                            ref={ctxMenuProps.ref}
                         >
                             {ctxMenuProps.popover}
                             <span data-testid="content-clicked-info">