Dialogs do not appear when editor is inside a React MUI Dialog component

[urb4nc4rl]

I’m having some issues though with the display of dialogs when my MDXEditor is already inside a React <Dialog> component.

In the example shown below, when the user clicks the toolbar 'Link' button, the create link dialog is not shown, or is perhaps shown underneath the existing dialog.

import {  Dialog,  DialogContent,  DialogTitle } from "@mui/material";


      <Dialog>
        <DialogTitle>My Dialog</DialogTitle>
        <DialogContent 
            <MDXEditor
            plugins={[
                linkPlugin(),
                linkDialogPlugin({linkAutocompleteSuggestions: []}),

                toolbarPlugin({
                toolbarContents: () => (
                    <>
                    {" "}
                    <CreateLink />
                    </>
                )
                })
            ]}
            />

        </DialogContent>
      </Dialog>

[petyosi]

Most likely a matter of zIndexing. The editor appends an element to the body and uses it as a container for all dialogs. Many of them include forms, and if they are kept within the editor, the dialog buttons are "caught" by form management tools like Formik for example.

I will take a look and see what kid of workaround is needed. Most likely you will have to zIndex it.

[urb4nc4rl]

Thanks - for anybody who needs it, here's the CSS workaround until your investigation is complete:

div[data-radix-popper-content-wrapper] {
    z-index: 2000 !important;
}

(FYI: MUI seems to give its dialogs a z-index of 1300)

[paulkuhle]

Yep, you can create a new stacking context in the editor like so:

.editorRoot {
  /* ... */
  position: relative;
  z-index: 202;
}

This essentially gives you a baseline z-index of 202. All z-index: auto components (the link dialog, paragraph dropdown, etc.) will render on top of it. So you don't need to target individual components.

It would of course be nice to have support for this by default, although you'd have to come up with an elegant way to make the z-index customizable. For example, 202 works for Mantine dialogs, but MUI uses a higher value as @urb4nc4rl has pointed out.

[michaek]

Adding global styles for an attribute known to be on the wrapper seems preferable to creating a new stacking context for the editor. Setting the z-index for the editor itself is likely to put it in the wrong stacking order with respect to the UI elements that one might want the link dialog to display over, introducing more stacking problems.

I think it would be beneficial for the linkDialogPlugin to take options for the display of the dialog, such as a classname to add to the popper content wrapper.

[petyosi]

Update, there's a CSS class added especially for that purpose: mdxeditor-popup-container.

Something like:

.mdxeditor-popup-container {
z-index: 9999;
}

should solve the issue.