Video showing bug alongside Syncfusion's ContextMenuComponent

[voigtboy]

Included you will find a zip file containing my example project as well as a video. Please watch the video as I will reference what is going on below.

When the tree control is paired with Syncfusion's ContextMenuComponent, react seems to remove some essential html elements that the ContextMenuComponent requires. As soon as I remove the tree control from the test, everything works as expected.

When the video starts, I expect the context menu to show whenever the vertical dots in the tree control are clicked OR the OPEN div is clicked.

29 sec: I make a change to a comment so I can quick save/hot reload, showing console errors to help pinpoint what may be going on. Even though some of the errors point to the ContextMenuComponent, I believe the root cause is that the tree control is removing some of the elements it needs to operate.

57 sec: I comment out the tree control and show that the context menu shows when the OPEN div is clicked as it should.

1:30 sec: I show an essential DOM element created and utilized by the context menu control 'e-contextmenu-wrapper'. When that control is present, there usually isn't an issue.

1:55 sec: When the tree view control is brought back in AND the page is refreshed, the 'e-contextmenu-wrapper' is no longer preset, meaning the context menu will no longer work.
[complex-tree-issue.zip]

(https://github.com/lukasbach/react-complex-tree/files/9316674/complex-tree-issue.zip)

[voigtboy]

Any update to this?

[lukasbach]

Just from the video, it looks like the render logic of the context menu component is breaking when the tree is rendered in, which causes the context menu component not to mount the context-wrapper DOM node to the document. I suppose the stack trace coming up around 0:45 is causing this issue to not mount the node, and at least the part of the stack trace visible in the video does not suggest it coming from rct. I'm pretty sure that rct is not just removing random DOM nodes from the document, but that they are not mounted in the first place because there is some conflict during the render logic of the context menu component. Can you try to investigate the stacktrace to see what lines of code the errors are coming from, and see what the issue for that is?

[voigtboy]

I'm new to react so I can try, but may not know what I'm doing ;). I also opened a ticket w/Syncfusion but they keep coming back with 'we cannot replicate it' even with my project/video.....

…

On Wed, Aug 17, 2022 at 9:24 AM Lukas Bach ***@***.***> wrote: Just from the video, it looks like the render logic of the context menu component is breaking when the tree is rendered in, which causes the context menu component not to mount the context-wrapper DOM node to the document. I suppose the stack trace coming up around 0:45 is causing this issue to not mount the node, and at least the part of the stack trace visible in the video does not suggest it coming from rct. I'm pretty sure that rct is not just removing random DOM nodes from the document, but that they are not mounted in the first place because there is some conflict during the render logic of the context menu component. Can you try to investigate the stacktrace to see what lines of code the errors are coming from, and see what the issue for that is? — Reply to this email directly, view it on GitHub <#134 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AB3PUKDAWKNK2HMTFFKOZGTVZTRX7ANCNFSM56LWY3EA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[lukasbach]

I'll close this for now because right now I don't think this is related to this library. Feel free to reopen or open a new issue of there are any news that regard this library.