overlays not working in CDK 8.1.2

[tmtron]

Reproduction

Here is our related stackblitz example.
This uses the same dependencies as our app, but unfortunately we cannot reproduce it on Stackblitz yet. We hope someone can guide us in the right direction to make a reproduction example.

Expected Behavior

The overlays should show up in front of all other elements - even in full-screen mode.

Actual Behavior

The overlays show up behind all other elements, and are invisible. So at first sight it seems that the clicks don't work.

Here is an example what happens in our app:

• when we first open the app and click on the pager-dropdown the overlay is not shown
• this also happens for other drop-downs (and even for modal dialogs)
• when we switch to full-screen mode (we use screenfull-js) the overlays appear
• when we now exit full-screen the drop-downs work correctly

more info:

• when we revert the @angular/cdk version from 8.1.2 to 8.1.1 the app works correctly
• even with 8.1.2 we can make the app work (at least in non-fullscreen mode) when we deactivate the FullscreenOverlayContainer:

@NgModule({
   ...
  // when we deactivate this line, it even works with cdk version 8.1.2
  ,  providers: [{ provide: OverlayContainer, useClass: FullscreenOverlayContainer }]
})

• maybe this is related to pull-request #11940?

We hope that someone can give us a hint what this could be related to or what else we could try or check so that we can give a reproduction example on stackblitz.

Backreference to a related Stackoverflow question

Environment

• Angular: 8.1.3
• CDK/Material: 8.1.2
• Browser(s): Chrome, Firefox and possibly all others
• Operating System (e.g. Windows, macOS, Ubuntu): Win 10 64-bit

[FoxelFox]

I can confirm this i had trouble with Tooltips, Menues and Dialogs in Version 8.1.2

[oktav777]

I can confirm that I had the same issue after upgrading from @angular/material@7.x to @angular/material@8.x. The whole app was broken(overlay components) but without any errors in console or when compiling with --prod flag.

The fix in my case was to provide the FullscreenOverlayContainer in the root @NgModule. I was providing it in a specific submodule, where the fullscreen feature was used only. Now the app works fine and all overlay elements are displayed correctly.

But I think this is not an ideal approach, because imagine if you use a library that relies on the FullscreenOverlayContainer, that library will be broken and developers will have to provide it on the root level to make it work.

[tmtron]

@oktav777 :

• I can confirm that your workaround also fixes the issue in our application! Thanks.
• However, I still cannot reproduce it in thestackblitz example: Could you try to alter the example so that we have a working reproduction?

In the example, the FullscreenOverlayContainer is provided by the DemoMaterialModule (in material-module.ts) which is then imported in the AppModule (in main.ts).

[oktav777]

I think the issue is related to lazy-loaded modules.
Stackblitz example

• Click Navigate, this button have a tooltip
• Hover over This button has a tooltip but you wont see it ;( button, it will have a tooltip
• Now open './comp/comp.module' and comment and uncomment the line 21 with providers option
• The This button has a tooltip but you wont see it ;( tooltip is gone, the tooltip for Navigate works fine as it's module is not lazy loaded

[tmtron]

@andrewseguin : please remove the cannot reproduce label, since we now have an example to reproduce the issue: see comment above (by oktav777)

[yko-ext]

I can confirm this i had trouble with DatePicker and Dialogs in Version 8.1.2+
It works if I remove providers: [{ provide: OverlayContainer, useClass: FullscreenOverlayContainer }]

[francobasilico]

I still have this issue.

@angular: 8.2.7
@angular/material: 8.2.0
Browser(s): Chrome, Firefox and possibly all others

Anyone found the cause of this issue?

[xugetsu]

@andrewseguin can you please remove the cannot reproduce label, see tmtron's comment
also, I'm hoping the team prioritize this issue and fix it as soon as possible.

[mischkl]

I get this problem within lazy-loaded elements, after opening a dialog from within the main app.

[mischkl]

I've confirmed that the problem is resolved in Angular Material v9 (tested using lazily-loaded Angular v8 components, with Ivy disabled). However, a lot of organizations won't be able to switch easily, so the fix should absolutely be backported IMHO.