Enterprise-ng: Popupmenu: Unwanted navigation occurs if the menu is destroyed when clicking a menu item

[volante007]

Describe the bug
If a click on a menu item (e.g. soho-popupmenu-label) causes the menu to be destroyed, an unwanted navigation occurs.

To Reproduce

1. Go to https://stackblitz.com/edit/ids-quick-start-950-l5edgr?file=src%2Fapp%2Fapp.component.html
2. Open menu
3. Click on A (nothing will happen, by design)
4. Click on B (nothing will happen, by design)
5. Click on C

Result
An unwanted navigation occurs (see the address bar with added /#).

All that happens is that when clicking C, the showMenu flag is set to false, causing the popupmenu to be destroyed due to its *ngIf. Not a very common use case perhaps, but let's say a menu click opens another view that doesn't include the popupmenu.

This causes problem when the app also uses the Angular Router.

Expected behavior
A menu item click should never cause a navigation change.

Version

• ids-enterprise-ng: 9.5.0

Additional context
Might be an issue in the underlying popupmenu control rather than the angular component.

Related to https://github.com/infor-design/enterprise-ng/issues/807.

[volante007]

Can be reproduced in the popupmenu control as well.
https://design.infor.com/code/ids-enterprise/latest/demo/components/popupmenu/test-destroy.html

1. Open dev console, execute below

$('#popupmenu-2 li:first-child').on('click', function () {
   $("#popupmenu-trigger").destroy();
});

1. Open menu and click "Menu Option #1"
2. Notice page navigation change

[tmcconechy]

We probably need to do a stop propagation in the click code.

[CindyMercadoReyes]

This issue is now resolved.