bug(mat-menu): Menu not visible (even with FullscreenOverlayContainer ) when used with mat-dialog.

[infacto]

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

No response

Description

It's really great that mat-menu are visible in fullscreen with the following change:

app.module.ts (providers)

{ provide: OverlayContainer, useClass: FullscreenOverlayContainer }

But it seems that it doesn't work, if a component rendered in a mat-dialog goes into fullscreen. I think it's because both using cdk-overlay-container.

I've tested it. I moved the component to a simple page and see the menu in fullscreen. 👍

But when I fullscreen the same component from a dialog, the menu is hidden. 😕

Reproduction

Steps to reproduce:

1. Create a component and display it in mat-dialog.
2. Provide a button in your component to elRef.nativeElement.requestFullscreen().
3. You component should also have a mat-menu. Toggle it.

You don't see the manu. It's under the fullscreen element.

Do the same again but without mat-dialog. The menu is visible thanks to FullscreenOverlayContainer.

Btw. should Angular Material provide FullscreenOverlayContainer by default? ...

Demo Page (Editor)

Expected Behavior

mat-menu should be always displayed. Even in fullscreen.

Actual Behavior

mat-menu not visible in fullscreen when fullscreen component was/is in mat-dialog.

Environment

• Angular: ^14.1.0
• CDK/Material: ^14.1.0
• Browser(s): Chrome 106.0.5249.119
• Operating System: Windows 10 (20H2 Build 19042.746)

Screenshots

Workarounds

Not yet found. But I have an idea: Angular Material Component could provide a overlay in component context. I'm still not sure what exactly the problem is. Any idea is appreciated. Currently I try to avoid dialogs. But that's not easy in my case. Did I missed something? It's surely not only about mat-menu. It affects all overlay elements. Update: A workaround with a soft fullscreen made with Overlay see #25844.

References

#1628 #1653 #1949

[infacto]

I see the following error on console.

ERROR DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
    at FullscreenOverlayContainer._adjustParentForFullscreenChange

[crisbeto]

I spent a bit of time investigating this and I'm not sure that there's a good way to resolve it based on our current setup. Overlays are inserted in the cdk-overlay-container to ensure that they're always on top of all other elements and to make it easier to control stacking and clipping if the overlay origin is inside an overflow: hidden element. This breaks down for fullscreen elements, because the browser inserts them in a special "top layer" which is always on top of everything else. To mitigate it, we added the FullscreenOverlayContainer which moves the cdk-overlay-container into the fullscreen element, but it breaks down when the fullscreen element itself is inside the overlay container. This can be detected so we can at least throw a better error, but it won't help with resolving the issue.

We had a similar bug report recently in #25799. Both issues can be resolved by using dialog elements for the CDK overlays, but that may be a breaking change in itself because users won't be able to control the z-index anymore. Using a dialog element for all overlays can also be problematic for accessibility.

[infacto]

Thanks for investigation. My current workaround is to fullscreen (pseudo/fullpage) the element using custom overlay (fixed, 100% size).

• Get the parent element from the element/component to fullscreen. We need this to move the component back again later.
• I move the element to the pseudo fullscreen overlay container we just created. The overlay has custom class with fullscreen styles.
• To exit fullscreen I move the component back to its origin parent and dispose the overlay.

class MyComponent {
  toggleFullscreen() {
    if (this.overlayFullscreen) {
      this.parent?.appendChild(this.elRef.nativeElement);
      this.overlayFullscreen.dispose();
      this.overlayFullscreen = undefined;
    } else {
      this.parent = this.elRef.nativeElement.parentElement;
      this.overlayFullscreen = this.overlay.create();
      // We need to add the class manually, because create props will not yet applied.
      this.overlayFullscreen.overlayElement.classList.add('overlay-fullscreen');
      this.overlayFullscreen.overlayElement.appendChild(this.elRef.nativeElement);
    }
  }
}

styles.scss (global)

.overlay-fullscreen {
  width: 100%;
  height: 100%;
}

It works. If you want the native fullscreen, you could combine this with requestFullscreen() of the whole app (e.g. body element).
To be honest, I like this way. But I'm not proud of my code. I wish that Angular official support such a method to fullscreen (overlay) an existing component instance. Currently you can only create a new instance of a component. In some cases you won't lose the component state. For example when toggle fullscreen. Anyway... I hope my solution can help...