Bug: cdk-overlay-container is broken when importing FundamentalNgxCoreModule in a module

[LiorCapsiSAP]

Is this a bug, enhancement, or feature request?

BUG

Describe your proposal.

When opening a popover using a moduled component and importing FundamentalNgxCoreModule in component's module, 2 cdk-overlay-container divs are added to the DOM. At least one of them (some times 2) have a 'fd-message-toast-container' class on them. This causes different popovers to open in different containers (imagine a select control in a popup) so one hides the other.

Can you handle that on the application side

No.

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

ng17.3 , fd 0.49.2

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Open the popover's documentation in stackblitz (https://stackblitz.com/run?file=src%2Fapp%2Fpopover-programmatic-open-example.component.ts,src%2Findex.html). add FundamentalNgxCoreModule to Imports. open the popover. Observe 2 divs with class 'cdk-overlay-container' . One of them with an additional 'fd-message-toast-container' class.

Please provide relevant source code (if applicable).

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.

[droshev]

@dpavlenishvili Can you check this issue?

[LiorCapsiSAP]

Adding to this issue- this happens when we import MessageToastModule which makes it totally unusable

[devconcept]

This is the cause:

https://github.com/SAP/fundamental-ngx/blob/91006a4f86ed9550fe66a198924509e9339ab5e2/libs/core/message-toast/message-toast.module.ts#L18

By providing a custom OverlayContainer in the message toast module when importing the whole FundamentalNgxCoreModule the default overlay container is overridden hence why there are 2 container div.

This might be related:

https://github.com/angular/components/issues/26542

Given that the class fd-message-toast-container has no CSS properties associated with it (in my findings at least) maybe is a good idea to delete the custom Overlay container and just use the default one?