ui: session - dropdown/menu opened in header are not closed when user is logged out

[SuperITMan]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/NationalBankBelgium/stark/blob/master/CONTRIBUTING.md#got-a-question-or-problem

Current behavior

When the session is closed by the StarkSession service, it redirects to the session-logout page.
Unfortunately, if the user opened the language selector before being logged out, it stays opened.

Expected behavior

The dropdown should be closed when the user is redirected to the session-logout page.

Minimal reproduction of the problem with instructions

Open the language-selector and wait until you are logged out automatically.

What is the motivation / use case for changing the behavior?

Bug fixing.

Environment

Angular version: 7.x
Stark version: 10.0.0-rc.3

[christophercr]

After investigating the issue, it turns out the cause of the problem is that any Angular Material element that creates an overlay, such as the mat-select inside the StarkDropdown component, is embedded in an OverlayContainer and this container is not placed inside the app component but at the root of the page.

Therefore, when the view is destroyed by the router when navigating to the SessionExpiredPage, the container remains there with the overlays that it had at the moment (open or closed):

So, the solution would be then to destroy such OverlayContainer when navigating to any of the exit states: SessionExpired and SessionLogout. This can be done by calling its ngOnDestroy method.