Enterprise: Tabs: Iframe reinitialized on add/remove of tabs

[marclouisgenedeguzman]

Describe the bug
Soho-tab content is reinitialized when adding/removing tab

To Reproduce
Steps to reproduce the behavior (application implementation):

1. run https://www.bing.com
2. search anything on the bing site
3. run another program, mms001
4. once the tab is added, go back bing.com tab (notice that it returned to https://www.bing.com

Expected behavior

1. run https://www.bing.com
2. search anything on the bing site
3. run another program, mms001
4. once the tab is added, go back bing.com tab (notice that it returned to https://www.bing.com (search result should still reflect on the tab content)

Version

• ids-enterprise-ng 7.2.4

Screenshots
If applicable, add screenshots to help explain your problem.

Platform

• Infor Application/Team Name: User Productivity Team
• Device: N/A
• OS Version: Windows 10
• Browser Name: Google Chrome
• Browser Version: Version 85.0.4183.83 (Official Build) (64-bit)

Additional context
Tab content is reinitialized when removing tab as well

tagging @lucacolumbu

[tmcconechy]

I'm not following how to reproduce this issue even with the video? What is mms001? It sounds like maybe an application coding issue?

Does it have anything to do with tab events? https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html or what are you doing with the tabs specifically here?

Could you spend a little time on a reduced test case or see if there is a way to see this in the examples?

[lucacolumbu]

@tmcconechy mms001 is a M3 application. @marclouisgenedeguzman can you recreate this bug using the markup in our examples pages that Tim has shared? https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html

[tmcconechy]

Ok, Also This is related example showing add/remove tabs.
https://master-enterprise.demo.design.infor.com/components/tabs/example-add-tab-button.html

It seems like we should be able to reproduce this in our examples but need more details.

[marclouisgenedeguzman]

Attaching replication on enterprise-ng sample

attaching html code
tabs-dismissible.demo.txt

[tmcconechy]

I'm not sure what this has to do with bing. I think thats maybe confusing me on this issue. But looks like in the video whats happening is:

a) when you close a tab it activates another tab (this seems valid)
b) the iframe is reloading because the tab was hidden and then shown

I'm not sure what we could do about this as we don't have any control over the iframe (and highly do not recommend using them).

Maybe there is a way to cache the iframe contents. Or maybe you can not use them and put the information in the DOM? Basically:

• If you use display:none then the frame is reloaded
• If you do not want that then use visibility:hidden or opacity:0 to hide the frame

Except that we can't easily make the tab component use visibility: hidden or opacity or it will cause issues. Maybe an idea is

• On activate move the iframe into the page
• On deactivate move the iframe out of the tab hidden off the page?

[tmcconechy]

On further review - i do see the issue. It only does it on delete and add tab which is strange. I'm looking at this now.

[tmcconechy]

Quick update on this is that there is a simple "workaround" as there is an option for what it's doing. The workaround is adding setting "disableAutoUpdatedCall"

<div soho-tabs disableAutoUpdatedCall="true">

What this is doing in the Ng component is reinitializing the tabs when the tab count changes. This is really only needed when the tab count changes when using dynamic tabs.

I'm looking "if" there is a better solution, that may require defaulting this to true and some API changes but not sure about these yet. This setting definitely solves this case, so try it out for now and test. And i'll finish that research tomorrow

[whernebrink]

Hi @tmcconechy ,

I tried the suggested workaround but can't get it to work. Our use case is with creating dynamic tabs and be able to close them (without having an impact on the other open tabs), that's how/what we instantiate new M3 programs instances in, a new tab. Two issues I am having when applying the disableAutoUpdateCall="true":

1. Dynamically adding a tab will not show, unless you collapse application menu (recalculates the tab) and such things.
2. The svg with close icons are lost when adding disableAutoUpdateCall="true", even though dissmissible="true"
3. Getting an error trying to navigate to the dynamic tab (which is visible after e.g. app-menu has been triggered

.gif showing issue 1. and 2.

.img showing error issue 3.

I have created an h5-tabs feature module which you can just plug n play in e.g. ng-quickstart:
m3-tabs.zip

1. Extract it to be in src/app/m3-tabs
2. Add to app.module imports: []
3. Add inside #maincontent in app.component.html

Would appreciate if you can get this potential workaround working in my provided "simple" (dynamic stuff never really are) example.

[tmcconechy]

Thanks for the feedback, the dynamic tabs was what I was looking at still. I sort of hoped you didn’t need to change them in the fly as these two things conflict. Also i didn’t think of the icon problem. I’ll continue looking as I have a few ideas to fix this better.

[whernebrink]

Great, thanks Tim!

[tmcconechy]

@whernebrink I pushed a PR u can try it out on that branch if you like. The problem is generally that the tabs need to be updated if the tab count changes. So once you have this i have given a new ui to force update/refresh when its "safe".

So you would need to
a) Use <div soho-tabs disableAutoUpdatedCall="true"> https://github.com/infor-design/enterprise-ng/pull/930/files#diff-8d10e630a098469d93f796aa77460a4ad30a1bb8890072cf929c486e55950078R4
b) in you functions that change the tabs add https://github.com/infor-design/enterprise-ng/pull/930/files#diff-11fb6fb3dbc217802abffcc158f358d6034f6e408cbc134dee0d0011a9d690afR68 to sync the tabs

I'm hoping this will work. The only problem is if you for some reason need to change the tabs and keep the iframe in sync. I.E. hoping the tab dynamic change is something you do where the state can be reset?

[whernebrink]

@tmcconechy Thanks! I tried it out and that seems to be working, i.e. keeping what one searched for. The example with iframe is not the best/most crucial from our side (since 1. not sure this should even be allowed in the first place and 2. not sure how much this is currently used). But it was easy to show. A better, much more real life scenario is where the user has a datagrid which has been scrolled, and then when you close or open another tab, the tab gets updated and you'll lose you positioning (and loaded data). This would be hard to reset since one can not be certain that it hasn't been changed somewhere else.

However, I assume your proposed fix will work in the case of datagrids too. :) Although, not sure when there will ever be "safe" to use that refresh method (when would one want to trigger the refresh?). We will have to try it out when the fix is in. One potential future scenario however can be if you want to re-order the tabs e.g. with drag event. This action will not be possible without losing the context?

In regards to your PR: may I suggest not removing the [beforeCloseCallback]="onBeforeClose" from the markup in tabs-dissmissible.demo, and perhaps give some love (typings to the callback in the .ts) since this is good to know for us consumers (how to e.g. prevent the dissmiss of the tab).

On the same topic, there is an inconsistency in the SohoTabsEvent you get in [beforeCloseCallback]="onBeforeClose" callback and (activated)="onActivated($event)"

• The event.tab (as well as the second parameter) in the beforeCloseCallback reference the <li> of the tab, so you'd get the tabId with jquery e.g. event.tab.find("a").attr("tabId") whereas
• The event.tab in the (activated) reference the actual <a>
  where you can get the id via event.tab.getAttribute('ng-reflect-tab-id')

Is there a reason for this "inconsistency"? Seems to me that the SohotTabsEvent event.tab should always be returning the same "thing". Personally I'd prefer to aways get the <a>, so one can just do the .getAttribute() directly.

Sorry for the essay... Finally, here is just a .gif of the datagrid issue mentioned above, just visualize it. Thanks again.

[tmcconechy]

hi @whernebrink

1) I assume this should fix the datagrid case. I tried to reproduce it and couldnt https://github.com/infor-design/enterprise/commit/5e2b066ffeb9cdf2b9ed255e4bd6f1997ea0876e
2) i guess to me "safe" would be on the use case of when you swap out the tabs that are shown? Maybe changing a feature in your application reloads/changes the tabs? In the example when you press the buttons to change them? But when does that really happen in your case I dont know.
3) We have a request to drag tabs we are considering here https://github.com/infor-design/enterprise/issues/4520 we'll have to make that work...
4) Reverted that event .. Didnt mean to take it out
5) Yes i see what you mean about the inconstancy. We can change that. But can you make a separate issue for it. It is a (minor) breaking change tho.

[tmcconechy]

Reopened this issue. On working with @whernebrink we found a case is not working where you add tabs via the dynamic array. So investigating a better fix to support that case as well.

[tmcconechy]

@whernebrink i found a reasonable fix that i pushed into master and 4.35.x branches. I also made a 7.8.0 (Ng 9.0) and an 8.1.0 (Ng 10) as i needed to release.

SO you can try these versions in your app or test it on enterprise-ng master / 8.1.x or / 7.8.x branches by

• going to http://localhost:4200/ids-enterprise-ng-demo/tabs-dynamic
• on tab two search something
• try closing another tab -> search results should not reset
• press add new tab button -> search results should not reset
• not that clicking the other two buttons will reset the search but this should be ok as these are really net new tabs with new ifames

This is the fix https://github.com/infor-design/enterprise/commit/d168b78454c4c800377c7c160775754f36272de5 the problem was the tabs were beeing reappended to the parent container when they dont always need to be