RTE problem: Expression has changed after it was checked

[Marko]

Hi,

I have the following code:

<textarea
      id="fixTextArea"
      ej-rte
      [(value)]="newTask.remarks"
></textarea>

And when I set following:

newTask.remarks = "<p><ul><li>TTTT</li></ul></p>";

I get the following error:
EXCEPTION: Error in ./TaskModalComponent class TaskModalComponent - inline template:91:104 caused by: Expression has changed after it was checked. Previous value: '<p><ul><li>TTTT</li></ul></p>'. Current value: '<p></p><ul><li>TTTT</li></ul><p></p>'.


If I remove ej-rte from textarea, then I don't get error. Also if string dosen't have ul inside p, there will be no error. newTask.remarks is deffault "" and it is re-setted when reciving Observable response. If newTask.remarks has ul inside p on load, then there is also no error.
The original HTML (which also don't work) was created by RTE and it has been the following:
"<p></p>ghi<br><p></p><p><ul><li>asf safsa fsadfads</li><li>a sdfasdfdsaf a</li><li>&nbsp;sdf dsf asdf as</li></ul></p>"
If I remove ul element from HTML, then all works well.

So I wonder if is this the RTE problem?

I will be greatfull for any help you can provide,
Marko

[Keerthana Rajendran]

  

Hi Marko,   

 

Thank you for contacting Syncfusion support. 

 

Query: I get the following error:
EXCEPTION: Error in ./TaskModalComponent class TaskModalComponent - inline template:91:104 caused by: Expression has changed after it was checked. Previous value: '<p><ul><li>TTTT</li></ul></p>'. Current value: '<p></p><ul><li>TTTT</li></ul><p></p>'. 

We prepared a sample based on the shared code. Unfortunately we were unable to reproduce the reported exception in our end. Also , we couldn’t view the updated image. We have attached sample for your reference. Please download the sample from : 

 

http://www.syncfusion.com/downloads/support/forum/132152/ze/Sample1605763268.zip 

 

Please modify the above sample to reproduce the issue so that we can analyze and provide a better solution 

 

Query: If I remove ej-rte from textarea, then I don't get error. Also if string dosen't have ul inside p, there will be no error. newTask.remarks is default "" and it is re-setted when receiving Observable response. If newTask.remarks has ul inside p on load, then there is also no error.
The original HTML (which also don't work) was created by RTE and it has been the following: 
"<p></p>ghi<br><p></p><p><ul><li>asf safsa fsadfads</li><li>a sdfasdfdsaf a</li><li>&nbsp;sdf dsf asdf as</li></ul></p>"
If I remove ul element from HTML, then all works well. 

As per HTML specification, ul element is not valid inside <p> element. So inside RTE iframe the element structure is changed as “<p></p><ul><li>TTTT</li></ul><p></p>”.We suspect that you have received this in current value mentioned in your update. We have ensured this with iframe element  and the behaviour is same . Please refer to the below jsfiddle link 

 

Sample: http://jsfiddle.net/3yu6a/1/ 

 

 

Blog: https://stackoverflow.com/questions/10601345/ul-element-can-never-be-a-child-of-p-element 

 

 

Regards, 

Keerthana. 

 

[Marko]

Hi,

I read an artical here, and saw that to this issue comes when is not enabled enableProdMode, so just in development mode when comes to double checking...

As you requested, I am attaching ZIP with example where comes to problem when clicking on any of two buttons in example (which simulating http get request).

Regards,
Marko

Attachment: sync_b654c11f.zip

[Keerthana Rajendran]

Hi Marko,   

   

Query: I read an article  here, and saw that to this issue comes when is not enabled enableProdMode   

   

Yes, as you mentioned if we enable production mode using enableProdMode the issue has been resolved.   

   

Query: So just in development mode when comes to double checking...   

   

In development mode, you can resolve this by running change detection explicitly. Please refer to the given code    

   

constructor(private http: Http,private cd: ChangeDetectorRef) {   

  }   

   

  ngAfterViewChecked()   

{   

   this.cd.detectChanges();   

}   

   

   

We have added this to your sample and attached in the below link   

   

Sample: http://www.syncfusion.com/downloads/support/forum/132152/ze/RTE-1496863317.zip   

   

Regards,      

Keerthana.