Hi,
I found the following bug when using a tabs widget inside a modal (a Popup).
For loading reasons, in my app I use an IF statement in order to control what I show in the modal.One of the if results is an webblock with tabs.While I can normally navigate the tabs in the modal, when I close it, I get an error saying "An exception occurred in the client script. Error: Cannot read properties of null (reading 'querySelector') "This is most likely because when closing the modal, the IF statement is refreshed and it tries do destroy the tabs.This error appeared when upgrading our Outsystems UI Web component to version 2.11.0, while it appears that 2.12.0 still has it.
I shared also an OML example with this case in order to help in recreating the problem.
Good day,Ionut Vrinceanu
Hi @Ionut Vrinceanu,
Sorry, you are right!
Basically we have an issue when an AjaxRefresh occurs. Since the AjaxRefresh runs again the start of a new Tabs instance and there we are not ensuring if pattern really exist at the DOM we are falling in the issue you get.
As a workaround, at the TabsBlock you're using, you can add the TabsJS with the fixed issue.
The missing validation:
That said, we will make this fix at our side as well and it will be available at our next release.
Attached you can find the oml with the solution.
Thank you for the feedback!
Cheers,JR
@Ionut Vrinceanu,
First of all let me congratulate you about the "issue" description! Really well done!
Secondly, this is happening due to the moment you are updating the IF variable and at the same time, setting the popup toggle at the Close screen action.
Basically at the popup toggle to hide the popup you are removing it's content from the DOM due to the AjaxRefresh, however and since IF statement is inside it when Tabs are looking for it's content to destroy it, they will not find it since due to the Toggle + IF it will not be there already.
That said, the solution/workaround is about grant the IF has occurred, then Toggle out the popup. By adding an empty serverAction you will be able to achieve it!
Here an image about the changed logic:
Attached you can find the oml with the fix also.
Hope it helps.
PS: Do not forget to close the post if you consider it answered.
Hello @José Rio,
The solution shared doesn't help much because I actually need to destroy the content from the modal.
If I have a button with the default class in the webblock, I can accidentally access it by pressing enter.
Furthermore, while trying to update the example oml, I found that its the Tabs widget itself that doesn't like to be inside an IF clause. I created a simple screen with the tabs in an IF clause, and the error appeared when trying to hide it.I shared the oml as example.Hope it can help,Ionut Stefan