Context Menu displays behind modal when FileManager placed inside <dialog>

[AdamFipke]

Description

For context, I'm trying to use the FileManager as a way to select a file to insert inside my rich text editor. I have a button for inserting images that will open a modal with this FileManager inside.

Unfortunately, it seems that the context menu appears behind the modal.

I did a little investigation and it seems that the context menu appears near the top of the DOM

I've tried adjusting the z-index of both the context menu and the modal and haven't had any luck. The best luck I've had was to cut and paste the context menu inside the "wx-filemanger" element, giving this:

Though obviously it doesn't appear where the user clicked, which is kinda jank, and will require rewriting the javascript that calculates where to put the context menu in the DOM (and will be cutoff by the boundaries of the modal, though personally I think this is fine).

For me, I'm not sure what I can do to solve this use case other than rewriting the logic in the javascript, so I thought it would be best to post here. Thanks in advance!

Reproduction

I made a quick stackblitz example here: https://stackblitz.com/edit/sb1-cuzr5rjl?file=app%2Fpage.tsx Try right-clicking a file with the modal open and see that the context menu appears behind the modal.

[Natasha-eng]

Hello @AdamFipke ,

We appreciate the detailed description and the StackBlitz example you provided.
The problem occurs because the dialog creates its own stacking context that's separate from the normal document flow, and our context menu is always drawn in document.body, which ends up under the dialog. However, there's a way to make all popups render in another container, specifically within the dialog itself.

You can use the popupContainerhelper from @svar-ui/react-core to achieve this. Here's how:

import { popupContainer } from '@svar-ui/react-core';

useEffect(() => {
  popupContainer(dialogRef.current as HTMLElement);
}, []);

Note that popupContainer is an undocumented helper from @svar-ui/react-core (we'll fix that and add it to the documentation). You can see a working example here: https://stackblitz.com/edit/sb1-ulbvzam9?file=app%2Fpage.tsx

[AdamFipke]

Ay sweet! That seems to have fixed it! Thanks!