Drop down menu breaks when using RTE in a dialog control

[Wil van Antwerpen]

Hi,

The javascript framework where the SyncFusion controls are being used changed in the latest version of their framework from a "fake modality" technique, which relied on CSS, to a real modal technique, that depends on the <dialog html element. As such, code using the RTE control that previously worked fine, now has problems.

A stackblitz example that shows the issue has been constructed at the following link:

https://stackblitz.com/edit/tawjlb-3wwy14?file=index.ts,index.html

The problem is that when the RTE is put inside the dialog element that none of the drop down menu's work as the RTE control inserts the drop down menu code just above the </body element.

As such, the drop down menu's, such as the "font drop down", the "font size selector" and the "font color selector", now fall behind the dialog element.
Something that can't be fixed by assigning a higher z-index value in CSS.

We're now hoping that there's a way to work around this issue, so that the drop down menu's work again.

PS: The toolbar showing up next to the RTE control, is not an issue when used in the original code of the javascript framework used.
As such I have not dedicated time to troubleshoot that in the stackblitz example.
In order to see the issue that this report is about: first click on the maximize button in the toolbar, then back to minimize.
Now use the font drop down and see that it is not displaying the list of fonts to select from as is expected.

Thanks!

--
Wil

[Vinitha Jeyakumar]

Hi Wil van Antwerpen,

Your reported issue can be resolved by appending the dropdown popups to the Dialog element using the toolbarClick event and by using toolbar type as MultiRow like below,

Code snippet:

let defaultRTE: RichTextEditor = new RichTextEditor({

  

  toolbarSettings: {

    type: 'MultiRow',

    items: [

      'Bold',

      'Italic',

      'Underline',

      'StrikeThrough',

      '|',

      'FontName',

      'FontSize',

      'FontColor',

      'BackgroundColor',

      'LowerCase',

      'UpperCase',

      '|',

      'Formats',

      'Alignments',

      'OrderedList',

      'UnorderedList',

      'Outdent',

      'Indent',

      '|',

      'CreateLink',

      'Image',

      '|',

      'ClearFormat',

      'Print',

      'SourceCode',

      'FullScreen',

      '|',

      'Undo',

      'Redo',

    ],

  },

  cssClass: 'customClass',

  toolbarClick: toolbarClick,

});

defaultRTE.appendTo('#defaultRTE');

function toolbarClick() {

  if (document.getElementsByClassName('e-popup-open')[0]) {

    document

      .getElementsByTagName('dialog')[0]

      .appendChild(document.getElementsByClassName('e-popup-open')[0]);

  }

}

Modified Sample: https://stackblitz.com/edit/tawjlb-zztgft?file=index.ts,index.html

API Link: https://ej2.syncfusion.com/documentation/api/rich-text-editor/#toolbarclick

Regards,

Vinitha

[Wil van Antwerpen]

Hello Vinitha,

Thank you for your very quick answer, sorry it took me a few days to get back to this.
I certainly like the way you approached the problem and it does work in this simple example.

Sadly when I put the same code in the library framework that I am using, it does not work well. First I had to click 3 times before the drop down showed and then the drop down displayed outside of the dialog and the dialog resized itself. Very strange, but I think that that part is not a syncfusion problem (I might be wrong).

So I then changed your code a little by calling the logic from the created event. The code is also changed a little bit to take all of the html popup elements and re-attach those in the dialog element, so not the popup-open element(s).

That takes care of the "need to click 3 times" issue, but the popup itself is still displayed at the wrong location.

The changed code looks like this:

         cssClass: 'customClass',

         created: onCreated

   });

defaultRTE.appendTo('#defaultRTE');

function onCreated() {

  let popups=null;

  let dg=null;

  popups = document.getElementsByClassName('e-dropdown-popup');

  dg = document.getElementsByTagName('dialog');

  if ((dg) && (popups)) {

    defaultRTE.refreshUI();

    for (let i=0;i<popups.length;i++) {

      dg[0].appendChild(popups[i]);

    }  

  }

};

or in stackblitz:

https://stackblitz.com/edit/tawjlb-thuf25?file=index.ts,index.html

Also note that the way the other library works within the framework of theirs that I can't call the refreshUI method just after the showModal method.

I will contact those library developers and see if they have any idea what is still going wrong.

Thanks for the help so far, much appreciated.

I will let you know if I find out more.

--
Wil

[Vinitha Jeyakumar]

Hi Wil van Antwerpen,

Thanks for your update. Please get back to us if you need any further assistance.

Regards,

Vinitha