renderBodyContextMenu gets rendered outside of React root

[mscolnick]

for blueprintjs/table

Bug report

• Package version(s): blueprintjs/table: 1.14.0
• Browser and OS versions: n/a

Steps to reproduce

Create a table with renderBodyContextMenu. View the context menu in the React dev console and see that its react context is empty

Actual behavior

renderBodyContextMenu gets rendered outside of the React hierarchy that the Table is in so the context menu does not have access to my React context

Expected behavior

context menu has React context

[giladgray]

seems like the crux of this issue is using ReactDOM.render instead of ReactDOM.unstable_renderSubtreeIntoContainer. The latter preservers context; the former creates new. Makes sense to refactor to the latter as we're re-implementing Portal functionality.

[mscolnick]

thanks!

[tgreenwatts]

Does this require work on blueprint's side? Sorry I'm unclear

[speletz]

Any update on this?

[adidahiya]

no, I don't think anyone has looked into this. would be open to PRs (with tests included). I believe this is the line in question that @giladgray is referring to:

blueprint/packages/core/src/components/context-menu/contextMenu.tsx

Line 108 in 874b757

contextMenu = ReactDOM.render(<ContextMenu />, contextMenuElement) as ContextMenu;

[giladgray]

ugh this is not easily fixable. i'm not sure that using unstable_... would preserve context.

[JoonsungUm]

@giladgray The root cause of these issues seems to be that the ReactDOM.render() method, which you mentioned, creates a new tree. The problem is that the new tree cannot access the context shared within the existing tree.

What do you think about re-implementing the ContextMenu? When I re-implemented the core of the declarative part using the Portal, I could get the following benefits:

• React Context is preserved.
• If this.state and this.props are changed, The contents of ContextMenu will be re-rendered.

I know that you are currently working on a fix for ContextMenu. After you complete the work, I will be able to reimplement the Imperative API.

Attached a partial implementation.

contextMenu.tsx

import { Portal } from "../portal/portal";

// ...

export interface IContextMenuProps {
    // Move fields in state to props so that the fields can be passed by ContextMenuTarget components
    menu?: JSX.Element;
    offset?: IOffset;
    // ...

}

// ...

export class ContextMenu extends AbstractPureComponent<IContextMenuProps, IContextMenuState> {

    // ...

    public render() {
        const content = <div onContextMenu={this.cancelContextMenu}>{this.props.menu}</div>;

        // ...
    
        return (
            // Wrapping with Portal
            <Portal>
                <div className={Classes.CONTEXT_MENU_POPOVER_TARGET} style={this.props.offset}>
                    <Popover
                        
                    // ...

                    </Popover>
                </div>
            </Portal>
        );
    }

// ...

contextMenuarget.tsx

import { ContextMenu } from "./contextMenu";

// ...

    public render() {

// ...

        const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {
            e.persist();
            e.preventDefault();
            this.setState({ e } as any);
        };

        const menu = this.state.e ? this.renderContextMenu(this.state.e) : null;
        const root = React.cloneElement(element, { onContextMenu });
        return (
            <React.Fragment>
                {root}
                {menu && (
                    <ContextMenu menu={menu} offset={{ left: this.state.e.clientX, top: this.state.e.clientY }} />
                )}
            </React.Fragment>
        );
    }
}

// ...

[badams]

@js-um @giladgray Would be great to get the menu re-rendering when state/props changes.
Is there any way with the current implementation to achieve this?