divs containing richtexteditor css are not getting removed from dom even after the component containing it is destroyed

[Shantanu Shreshth]

We have a modal which contains a component which has richtexteditor and ejs-mention components inside it. When modal is opened , the component containing richtexteditor is rendered. with this few divs with rte classes are added to the dom outside of the angular app-root selector like below :

After editing the richtexteditor and adding some mnetions with @ and #, when modal is closed, above divs are not removed from dom even if the component containing richtexteditor and ejs-metion is completely destroyed.

Because of the above we are getting a tabloid structure showing hex code at the bottom of the page.

This is not happening every time. Please suggest a solution for this.  

[Vinitha Jeyakumar]

Hi Shantanu Shreshth,

If you are using the RichTextEditor control inside a bootstrap modal dialog, we suggest you to destroy the RichTextEditor component on closing the Modal dialog using destroy method to resolve your reported issue, We have also prepared a sample for your reference

Code snippet:

app.component.ts

 

openModal() {

    const modalRef = this.modalService.open(ModalComponent);

    modalRef.componentInstance.name = 'World';

    modalRef.result.then((result) => {      

      (document.getElementsByClassName("e-richtexteditor")[0] as any).ej2_instances[0].destroy();

      // Add your onHide logic here

    }).catch((reason) => { });

    modalRef.hidden.subscribe(() => { });

  }

sample attached below,

If still issue persists, at your end please share us with issue replicating entire code snippet or runnable simple sample to validate further.

Regards,

Vinitha

Attachment: Ang_RTE_142af5c5.zip