bug(COMPONENT): Problem with mat-select in MFE: Options not displaying correctly inside cdk-overlay-container

[yvesguilherme]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

15

Description

Hey guys, how are you?

I'm having an issue when using the mat-select component in an MFE (Micro Frontend). The MFE is loaded into a shell, which I called mfe-login.

The problem is that when selecting an item, the mat-options do not appear. They only show up when I scroll, and even then, the dropdown does not disappear properly.

As you can see in the video below, there's a white vertical bar at the top of the page, and I believe the issue is related to the cdk-overlay-container. Has anyone else faced this issue? If so, how did you fix it?

I've been trying to resolve this for a few days now and even attempted adjusting the z-index, though I consider that a bad practice, and it still didn't work.

Any help would be greatly appreciated!

bug.webm

Reproduction

Unfortunately, I am unable to create a StackBlitz reproduction of this issue due to the complexity and size of the current project. I'm not sure if StackBlitz would support all the dependencies and configurations I've used in this project. However, I can provide any additional details or code snippets to help the team reliably reproduce the issue.

Expected Behavior

I expected the mat-select options to appear correctly when an item is selected. The dropdown should display the mat-options immediately without the need for scrolling, and the dropdown should close properly once an option is selected. There should be no unexpected visual artifacts, such as the white vertical bar at the top of the page.

Actual Behavior

When selecting an item from the mat-select, the mat-options do not appear immediately. They only become visible after scrolling, and even then, the dropdown does not close properly. Additionally, a white vertical bar appears at the top of the page, which I believe is related to the cdk-overlay-container.

Environment

• Angular: 18.2.0
• CDK/Material: 18.2.14
• Browser(s):
  • Brave Version 1.73.91 Chromium: 131.0.6778.85 (64-bit)
  • Chrome Version 131.0.6778.85 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Pop!_OS 22.04 LTS