Context menu

gurmilan

Current behaviour
The chart renders correctly when <Gantt> is used alone, but as soon as I wrap it with <ContextMenu> the entire Gantt area disappears. There are no errors or warnings in the browser console.

Expected behaviour
The Gantt should render normally while the context-menu plugin adds its right-click menu.

MINIMAL REPRO:
`import { Gantt, ContextMenu } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React, { useRef, useEffect } from "react";

const App = () => {
const apiRef = useRef();

const options = [
{
id: "add-task",
text: "Add",
icon: "wxi-plus",
data: [{ id: "add-task:child", text: "Child task" }],
},
{ type: "separator" },
{
id: "edit-task",
text: "Edit",
icon: "wxi-edit",
},
{ id: "cut-task", text: "Cut", icon: "wxi-content-cut" },
];

useEffect(() => {
if (apiRef.current) {
apiRef.current = apiRef.current;
}
}, [apiRef.current]);
const tasks = [
{
id: 20,
text: "201000400",
start: new Date(2024, 5, 11),
end: new Date(2024, 5, 12),
duration: 1,
progress: 2,
type: "task",
lazy: false,
},
{
id: 47,
text: "[1] Master project",
start: new Date(2024, 5, 12),
end: new Date(2024, 5, 12),
render: "spacer",
duration: 8,
progress: 0,
parent: 0,
type: "summary",
},
{
id: 22,
text: "Task",
start: new Date(2024, 5, 11),
end: new Date(2024, 5, 12),
duration: 8,
progress: 0,
parent: 47,
type: "task",
},
{
id: 21,
text: "New Task 2",
start: new Date(2024, 5, 10),
end: new Date(2024, 5, 12),
duration: 3,
progress: 0,
type: "task",
lazy: false,
},
];
const links = [{ id: 1, source: 20, target: 21, type: "e2e" }];

export default App;
`

Live sandbox:(https://codesandbox.io/p/sandbox/brave-jerry-2krjj9?file=%2Fsrc%2FApp.jsx%3A1%2C1-86%2C1[])

tasha

Hello

To make the gantt work with contextMenu you need to set the gantt api with the help of useState hook:
const [api, setApi] = useState();

 <Gantt
          init={(a) => setApi(a)}
          tasks={tasks}
          links={links}
          scales={scales}
  />

And pass this api to contextMenu:

      <Willow>
      <div onContextMenu={(ev) => menuHandler.current(ev)}>
        <Gantt
          init={(a) => setApi(a)}
          tasks={tasks}
          links={links}
          scales={scales}
        />
        <ContextMenu
          api={api}
          init={(v) => (menuHandler.current = v)}
        ></ContextMenu>
      </div>
    </Willow>

Aslo to have the styles for the context menu please add the class="wx-willow-theme" to the body in index.html file.
Please check the example: https://stackblitz.com/edit/vitejs-vite-ybnswzpo?file=src%2FGantt.jsx,src%2FApp.jsx,index.html