tiny mce inside a fluentui dialog - the menus do not open

[ishaisagi]

using Dialog (from "@fluentui/react") and adding a tinymce to the dialog, the control works well with one exception - the menus (edit\insert\view\format etc) are not opening when clicked.

exact same tinymce code but inside a materialui dialog works well...but my application needs to use fluent.
any advice?

[exalate-issue-sync]

Ref: INT-2584

[ishaisagi]

ok, I found that I have to add:
$(".tox-tinymce-aux").css("z-index","1900000")
to the "onLayerDidMount" event of the dialog.

[anton-johansson]

I'm having the same issue in a Charka UI dialog.

[tiny-james]

Here is an example:
https://codesandbox.io/s/tinymce-react-fluentui-modal-cgzkq

Two things were needed:

1. The z-index of the popups and menus need to be increased.

body.tox-fullscreen .tox.tox-tinymce.tox-fullscreen {
  z-index: 1000001;
}

.tox.tox-silver-sink.tox-tinymce-aux {
  z-index: 1000001;
}

2. forceFocusInsideTrap had to be turned off on the modal.

[tiny-james]

Example for Charka UI with fixed focus and z-index:
https://codesandbox.io/s/tinymce-react-chakra-ui-modal-pu9o0

[osmangokmenx]

trapFocus={false} works for me