add option to use laceholder before rendering ContextOverlay, activate it by default for ContextMenu

Author: haschek

src/components/ContextOverlay/ContextMenu.tsx

@@ -40,8 +40,15 @@ export interface ContextMenuProps extends TestableComponent {
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
     contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>;
-    /** Disables the button to open the menu. */
+    /**
+     * Disables the button to open the menu.
+     */
     disabled?: boolean;
+    /**
+     * We use the target as placeholder before the real `<ContextMenu /` is rendered on first hover or focus event.
+     * In case of problems set this property to `true`.
+     */
+    preventPlaceholder?: boolean;
 }
 
 /**
@@ -58,27 +65,33 @@ export const ContextMenu = ({
     /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu,
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
+    preventPlaceholder = false,
     ...restProps
 }: ContextMenuProps) => {
+    const toggleButton =
+        typeof togglerElement === "string" ? (
+            <IconButton
+                tooltipAsTitle={tooltipAsTitle}
+                name={[togglerElement]}
+                text={togglerText}
+                size={togglerLarge ? "large" : "medium"}
+                disabled={!!disabled}
+                data-test-id={restProps["data-test-id"]}
+            />
+        ) : (
+            (togglerElement as ReactElement)
+        );
+
     return (
         <ContextOverlay
             {...restProps}
             {...contextOverlayProps}
             className={`${eccgui}-contextmenu ` + className}
             content={<Menu>{children}</Menu>}
+            disabled={!!disabled}
+            usePlaceholder={!preventPlaceholder}
         >
-            {typeof togglerElement === "string" ? (
-                <IconButton
-                    tooltipAsTitle={tooltipAsTitle}
-                    name={[togglerElement]}
-                    text={togglerText}
-                    large={togglerLarge}
-                    disabled={!!disabled}
-                    data-test-id={restProps["data-test-id"]}
-                />
-            ) : (
-                (togglerElement as ReactElement)
-            )}
+            {toggleButton}
         </ContextOverlay>
     );
 };

src/components/ContextOverlay/ContextOverlay.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { Popover as BlueprintPopover, PopoverProps as BlueprintPopoverProps } from "@blueprintjs/core";
+import {
+    Classes as BlueprintClasses,
+    Popover as BlueprintPopover,
+    PopoverProps as BlueprintPopoverProps,
+    Utils as BlueprintUtils,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -13,6 +18,11 @@ export interface ContextOverlayProps extends Omit<BlueprintPopoverProps, "positi
      * Use it when you need to display modal dialogs out of the context overlay.
      */
     preventTopPosition?: boolean;
+    /**
+     * Use the overlay target as placeholder before the real `<ContextOverlay /` is rendered on first hover or focus event.
+     * Currently experimental.
+     */
+    usePlaceholder?: boolean;
 }
 
 /**
@@ -24,18 +34,79 @@ export const ContextOverlay = ({
     portalClassName,
     preventTopPosition,
     className = "",
-    ...restProps
+    usePlaceholder = false,
+    ...otherPopoverProps
 }: ContextOverlayProps) => {
+    const placeholderRef = React.useRef(null);
+    const eventmemory = React.useRef<undefined | "afterhover" | "afterfocus">(undefined);
+    const [placeholder, setPlaceholder] = React.useState<boolean>(
+        // use placeholder only for "simple" overlays without special states
+        (!otherPopoverProps?.disabled ||
+            !!otherPopoverProps?.defaultIsOpen ||
+            !!otherPopoverProps?.isOpen ||
+            !otherPopoverProps?.renderTarget) &&
+            usePlaceholder
+    );
+
+    const targetClassName = `${eccgui}-contextoverlay` + (className ? ` ${className}` : "");
+
+    React.useEffect(() => {
+        if (placeholderRef.current) {
+            const swap = (ev: MouseEvent | globalThis.FocusEvent) => {
+                eventmemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover";
+                setPlaceholder(false);
+            };
+            (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);
+            (placeholderRef.current as HTMLElement).addEventListener("focusin", swap);
+        }
+    }, [!!placeholderRef.current]);
+
+    const refocus = React.useCallback((node) => {
+        if (eventmemory.current === "afterfocus" && node) {
+            const target = node.targetRef.current.children[0];
+            if (target) {
+                target.focus();
+            }
+        }
+    }, []);
+
+    const displayPlaceholder = () => {
+        const PlaceholderElement = otherPopoverProps?.targetTagName ?? (otherPopoverProps?.fill ? "div" : "span");
+        const childTarget = BlueprintUtils.ensureElement(React.Children.toArray(children)[0]);
+        if (!childTarget) {
+            return null;
+        }
+        return React.createElement(
+            PlaceholderElement,
+            {
+                ...otherPopoverProps?.targetProps,
+                className: `${BlueprintClasses.POPOVER_TARGET} ${targetClassName}`,
+                ref: placeholderRef,
+            },
+            React.cloneElement(childTarget, {
+                ...childTarget.props,
+                className:
+                    childTarget.props.className ?? "" + (otherPopoverProps.fill ? ` ${BlueprintClasses.FILL}` : ""),
+                tabIndex:
+                    childTarget.props.tabIndex ??
+                    (!otherPopoverProps?.disabled && otherPopoverProps?.openOnTargetFocus ? 0 : undefined),
+            })
+        );
+    };
+
     const portalClassNameFinal =
         (preventTopPosition ? `${eccgui}-contextoverlay__portal--lowertop` : "") +
         (portalClassName ? ` ${portalClassName}` : "");
 
-    return (
+    return placeholder ? (
+        displayPlaceholder()
+    ) : (
         <BlueprintPopover
             placement="bottom"
-            {...restProps}
-            className={`${eccgui}-contextoverlay` + (className ? ` ${className}` : "")}
+            {...otherPopoverProps}
+            className={targetClassName}
             portalClassName={portalClassNameFinal.trim() ?? undefined}
+            ref={refocus}
         >
             {children}
         </BlueprintPopover>