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.