Reactive Web Duplicated DOM elements while transition occurs

Hi All,

I found an issue while I was doing some tests on the Reactive web.

I put some elements in a web block (simple elements with texts) and with OnReady I look to those elements with simple JS. (document query selectAll).


 For instance, 5 containers with the following text:

  • Teste 1
  • Teste 2
  • Teste 3
  • Teste 4
  • Teste 5

Inside another container (WidgetId parameter on that screenshot).


The result will be 1 on the first time the screen is opened.
But If I click to navigate to the same screen, the framework will allocate the next screen on the same DOM (it puts the next screen and then starts a transition effect and after it is finished, destroy the previous one).

So my output length will print 2 instead only 1.


First Time opening this screen:

If I click on the top menu to open the same page:

What's the problem here?


When I'm trying to iterate with simple JS those elements, it is finding the same element from the previous page that is using the same element ID. Maybe the framework needs to consider that the element already exists on DOM and generate another Unique ID to the new screen.


Hi Rafal,

You are right. 

Because of screen transitions, there is a timeframe where both the current and the next screen are rendered on the DOM.  When doing advanced code using JavaScript you need to be aware of that. As you are saying, the platform could do some automagic stuff in these scenarios, but it would always be hard to predict what to do, as OnDestroy will also be needed in some instances. 

As a workaround consider delaying a bit the JavaScript code.

Cheers,
Tiago Simões

Solution

Unfortunately delaying a bit it isn't a good way to work around, because it will show the element to the user during the transition at the beginning in one way and after in another way. Even If I delay a bit, I can't figure out how many seconds a page will take to fully loads all content. (imagine if I'm using aggregates or getData here). It will be necessary other triggers and codes to deal with that just because an HTML tag ID is been shown duplicated on my body.

I'm not using any advanced code here, I'm just looking at how many elements are in my DOM and because of it I can't continue to create some components if I cannot iterate correctly what is on my screen on OnReady event.

An HTML should never have 2 elements with the same element ID (w3 convention).

What I'm doing here is removing the ID attribute from the previous screen looking to the ".active-screen" class on frameworks screen container during transitions. 

Any thoughts about implement React Events TransitionStart and TransitionEnd? Like OnReady/OnRender/etc

Solution

Hi Rafael,

The default transitions (Screen Transitions CSS section in OutSystems UI Theme) are 300ms. Yes, looking at ".active-screen" is smart. And yes, implementing TransitionStart and TransitionEnd might be good idea for the future. 

Cheers,
Tiago Simões