Dropdown options in dialogs are not visible when the editor is in a fixed container (e.g. a modal)

[mehmetseckin]

We're using TinyMCE in a modal dialog, and we have to use the ui_container in order to keep floatpanels in place (see #3592).

TinyMCE appends the "dialogs" (such as "Insert Link") to document.body, disregarding the ui_container setting, while the floatpanels like dropdown options are still being appended to the specified ui_container. This causes the floatpanels like dropdown options inside TinyMCE dialogs to fall behind the dialog window as seen below.

I've tracked this down to the following line; the dialogs are rendered into document.body:

tinymce/src/ui/main/ts/WindowManagerImpl.ts

Line 79 in ec35e25

win = win.renderTo(document.body).reflow();

Here is a codepen that reproduces this behaviour

Also, if we don't use ui_container, the dropdown options are positioned incorrectly depending on the scroll position:

At the top of the window (good behaviour):

Scrolled down a bit, and then clicked the target dropdown (incorrectly positioned options):

Any ideas how to get around this?

[mehmetseckin]

This is not ideal, but I'm currently getting around this by polling for the dialog element and moving it into the desired parent. Here is a codepen demonstrating the solution.

setInterval(function moveTinyMceDialogInsideModal() {
  
  function getTinyMceDialog() {
    return document.querySelector('body > [role=dialog].mce-window');  
  }
  
  function getContainer() {
    return document.querySelector('.ms-Dialog-main');
  }
  
  let dialog: Element = getTinyMceDialog();
  if(dialog) {
    let container: Element = getContainer();
    if(container) {
      container.appendChild(dialog);
    }
  }
}, 100);

We are also experiencing this behavior. Setting an interval to manually move the float panel is not a viable solution.