Multiple Soho Panes in Application Menu: Static Accordion Header issues

[marclouisgenedeguzman]

Multiple Soho Panes on application menu:

• Static soho panes which have dynamic child panes cannot be expanded
• Static soho panes which have dynamic child panes cannot be expanded with multiple open expanded panes even with [allowOnePane]="false"
• Static soho panes collapse immediately after expand
• Dynamically created soho header/panes can be expanded.

Issue not encountered on ids-enterprise-ng 7.2.4
Issue encountered when upgraded to ids-enterprise-ng ^9.1.0

Recreated the issue using the following steps (App implementation of App Menu with Soho Accordion Panes:

1. Clear Recent items
2. Clear Favorites items
3. Reload H5
4. Wait for the M3 menu items to load
5. Expand Mashup, Recent and Favorites menus
   ISSUE: Menus automatically close

Expected behavior

• Static soho panes which have dynamic child panes can be expanded
• Static soho panes which have dynamic child panes cannot be expanded with multiple open expanded panes even with [allowOnePane]="false".

Version

• ids-enterprise-ng 7.2.4 (previously)
• ids-enterprise-ng 9.1.0 (M3 Application upgraded to this version)

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

Platform

• Infor Application/Team Name: M3 H5 UI Team
• Device: N/A
• OS Version: Windows 10
• Browser Name: Google Chrome
• Browser Version: Version 88.0.4324.190 (Official Build) (64-bit)

Additional context
Add any other context about the problem here.
Discussed this issue with @EdwardCoyle, need further investigation on flags on filter in accordion pane.

[EdwardCoyle]

Investigating this one requires access to the M3 test environment. If someone besides me picks up this issue up, please message me privately for credentials.

We currently haven't been able to reproduce this in our Enterprise (EP or NG) examples, but @marclouisgenedeguzman was able to demonstrate how to reproduce this problem in an M3 test environment running our latest release. The issue is caused by the .filtered flag remaining on accordion headers unexpectedly, but it may have something to do with the structure of this particular application menu. This may potentially also be an Angular issue, but not sure til we investigate further.

[tmcconechy]

My guess is something with the markup. If you do look in MS teams some people have done dynamic accordions areas differently (ng-container ect). Might be some tips / hints there

[tmcconechy]

Spoke to @EdwardCoyle and he has not been able to reproduce any issue. So removing the high designation and punting this out of this release for now (we can always patch later if more information is added)

[EdwardCoyle]

Currently discussing this one with @marclouisgenedeguzman. I had been able to reproduce in the M3 test environment but when trying again recently, the reproduction steps aren't working for me anymore. Wondering if they've worked around this issue (or maybe fixed, since we haven't been able to reproduce in EP or NG)

[marclouisgenedeguzman]

Investigation update:

root cause of issue when running program and accordion is not working anymore is Tabs.prototype.updated is being called -> which will call the reinitialization of tab which will call the renderHelperMarkup which reinitializes the app menu which reinitializes the accordion. (basically the soho-tab component are being reinitialized when there is new tab added (when new program is run))

[EdwardCoyle]

@marclouisgenedeguzman was able to step through a debugging session on recording to help us track this down: https://inforonline-my.sharepoint.com/:v:/r/personal/ed_coyle_infor_com/Documents/Recordings/Call%20with%20Marc%20Louis%20Gene%20De%20Guzman-20211116_072301-Meeting%20Recording.mp4?csf=1&web=1&e=darrYl

[tmcconechy]

@tjamesallen15 and @EdwardCoyle I realize the sprint is almost over. Could you prioritize this issue next? Thanks
@ericangeles

[ericangeles]

@tmcconechy yeah am actually working with @tjamesallen15 with this and we still trying to figure out to replicate the issue in the EP. Although @EdwardCoyle provides some info with recordings, and I think we'll need more help with the M3 team with regards to this and I will set up a meeting with them.

@tjamesallen15 @marclouisgenedeguzman

[tmcconechy]

Thanks. I assume will be next sprint but i can patch it when a solution is found.

[EdwardCoyle]

Adding some missing context and summarizing what's in the recording above... @marclouisgenedeguzman please add anything I may have missed:

Root Cause:
Event handlers are doubled up on some accordion headers, causing them to immediately close after they are opened by a user. Other accordion headers contain no event handlers and don't work as expected.

Steps that occur that cause missing/events:

• 3 accordion headers are pre-loaded and set up ahead of time (Favorites, Recent, Admin Tools)
• A Header Tabs component inside the page in configured with an Application Menu trigger tab, which is adding itself to the App Menu's list of trigger elements
• modifyTriggers is currently rebuilding the entire App Menu, which tears down the pre-existing accordion
• After the accordion sets up, the pre-existing panes have doubled up and/or missing event handlers, which causes the immediate close issue
• the dynamic accordions may load independently and will still work, but if a new page is loaded that contains the same header tabs, the loaded accordions will stop working.

Possible Solutions:

• In EP, change the modifyTriggers call to have a true third argument, which will prevent the App Menu from rebuilding
• Drastically simplify modifyTriggers to be much less expensive - It probably doesn't need to rebuild (maybe a harder approach)

[CindyMercadoReyes]

This issue is now resolved.