Context Menu with Wrapper Closes Immediately

[Michael Owen]

Do you want to request a feature or report a bug?
Report Bug

What is the current behavior?
After upgrading to V6 the context menu is not behaving as expected—it opens and then quickly closes without moving the cursor away. This works as expected on a normal div, but when I use a wrapper to pass in additional event data on click it fails to work as in V5. The gif below shows the updated vs. old behavior:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Minimal demo: https://stackblitz.com/edit/vitejs-vite-tnxa5e?file=src/ContextWrapper.tsx

What is the expected behavior?
For the context to open and stay open until an event (e.g., mouse moving away, click on item)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
This worked in react-contexify V5, with the same packages.

  "dependencies": {
    "@types/react-plotly.js": "^2.5.2",
    "plotly.js": "^2.16.3",
    "react": "^18.2.0",
    "react-contexify": "^6.0.0",
    "react-dom": "^18.2.0",
    "react-plotly.js": "^2.6.0"
  }

[Omer Zaman]

@fkhadra can you please offer any help on this issue? It has not been updated since November, 2022?

[DeepRolling]

For other people who fall into the same situation, try putting the show function into setTimoutout, this work for me.

onClick={() => {
    const { x, y, width } = echartsRef.current.getEchartsInstance().getDom().getBoundingClientRect();
    // Notice : setTimeout is necessary !!!
    setTimeout(() => {
        showDownloadMenu({
            id: DOWNLOAD_MENU_ID,
            event: new MouseEvent('click', {
                clientX: x + width,
                clientY: y,
            }),
        });
    });
}}