search

SAP / openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.
http://openui5.org
Apache License 2.0
2.95k stars 1.23k forks source link

The control core.HTML squashes the old HTML and the new one #3683

Closed ghost closed 1 year ago

ghost commented 1 year ago

I have a UI about documentation that shows its main content with a "sap.ui.core.HTML" control. The problem is that setContent is starting to async render the given HTML when the user clicks fast another page the setContent page is called again with a different HTML and it squashes the old HTML and the new one.

I have also tried to set the HTML content into a model and read it from there, but it works absolutely the same way. The model contains the new HTML, but the control still displays the squash version of the old and the new HTML.

Is there a way for me to fully replace the existing content or to wait for the HTML to be rendered and then replace it with a new one?

OpenUI5 version: 1.109.3

Browser/version (+device/version): Chrome, Macbook 16

Any other tested browsers/devices(OK/FAIL): Fails

The shown HTML content:

Screenshot 2023-01-19 at 10 30 31

The HTML content from the model:

Screenshot 2023-01-19 at 10 30 56

The view: Screenshot 2023-01-19 at 10 31 34

codeworrior commented 1 year ago

The HTML control has a property preferDOM which defaults to true. It's purpose is to retain DOM that has been modified dynamically (e.g. via user interaction or by some timer code etc.), even after a re-rendering of the control.

If you don't need this (your post sounds as if you don't), then set this property to false. The re-use of previously rendered DOM then should no longer happen.

If this doesn't solve your issue, can you please provide a small JSBin or similar that shows the issue in a reproducible way?

ghost commented 1 year ago

Yeah, I have tried with the preferDom="false" property, but it behaves the same way.

I will try to make a reproducible snippet and send it.

ghost commented 1 year ago

Here I have made a reproducible example. The size of the HTML is important because it is reproducible only with large HTMLs.

Here is a link: https://jsfiddle.net/rbspLyzw

And a video demo:

https://user-images.githubusercontent.com/66973520/213447188-edad5280-b17c-4f3d-86ad-6d1339355b1b.mov

codeworrior commented 1 year ago

As discussed via chat, the problem is with the content itself. The HTML control is intended to render an HTML fragment embedded into the current page. But in your case, the content was a full HTML document. There's no way to embed a full document into another document. I can't say without further analysis what internal functionality exactly causes the squashing then, but rendering full documents is anyhow not a feature of the HTML control.

When I remove the outer part of the document and just render the <body>'s content, wrapped into a <div>, then the quashing no longer happens.

I would suggest to use a similar approach.

If the full document is needed, then rendering it as external content in an <iframe> (or using the src doc property) might b another solution. This could for example be done in a simple custom control. Iframes however usually cause layout issues, o this might not be easy as well.

flovogt commented 1 year ago

Closing this as no further action is required.