Context menu snaps to top left corner in React 18 Strict Mode

[KevinHermelin]

keywords: ContextMenu, positioning, absolute, ContextMenu2, Popover2

Environment

• Package version(s):
  "@blueprintjs/core": "4.8.0",
  "@blueprintjs/popover2": "1.5.1",
• Operating System: Linux
• Browser name and version: Mozilla Firefox 103.0.2 (Same behavior in electron 20.0.3)

Code Sandbox

Link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/blueprint-sandbox-forked-ns061c?file=/src/index.tsx

Steps to reproduce

1. Make a React app with latest Create-React-App (This behavior is only shown on React 18).
2. Install core and popover2 packages and import corresponding CSS.
3. Create a ContextMenu2 with a context menu and some content:

function App() {
   return (
     <ContextMenu2
       content={
         <Menu>
           <MenuItem2 text="Save" />
           <MenuItem2 text="Save as..." />
           <MenuItem2 text="Delete..." intent="danger" />
         </Menu>
       }
     >
       <div style={{ backgroundColor: "cyan", height: 200, width: 200 }}>
        Right click me!
       </div>
     </ContextMenu2>
   );
 }

4. Run app.
   When you right click on the box now, the expected behavior is shown: the context menu is spawned where your
   cursor is.
5. Now, try wrapping the component in React.StrictMode:

function App() {
   return (
     <React.StrictMode>
       <ContextMenu2
         {/*...everything else*/}
       </ContextMenu2>
      </React.StrictMode>
   );
 }

6. Run app.
   When you right click on the box now, another behavior is shown. The context menu is spawned in the top left corner of the page.

Actual behavior

The context menu is placed in the top-left corner of the page.

Expected behavior

The context menu should be placed directly under the mouse cursor.

Possible solution

The only workaround I have found yet is to disable StrictMode for the parts where a context menu should be.

[adidahiya]

This is caused by our usage of findDOMNode, see #3979. This will be fixed when Blueprint is fully compatible with React strict mode in v6.0.

[adidahiya]

I tried this out with @blueprintjs/core v5.0.0-alpha.4 in this code sandbox, and it appears to still be a bug. There are two strict mode errors:

1. Portal uses legacy context (we will remove this in Blueprint v6.0)
2. Overlay uses findDOMNode via react-transition-group (this will be fixed for v5.0, see Removing findDOMNode #3979 (comment))

[adidahiya]

Note that this is still an issue after one Popover React 18 related fix in #6458

[adidahiya]

Still an issue after the core v5.9.0 Overlay2 migration & Portal no longer using legacy context in React 18: https://codesandbox.io/p/devbox/sad-carlos-dc2ddx

[wuyuanyi135]

Is there any workaround? just turn off strict mode?