fix(overlay): hide pane element if detached

* Currently the overlay element is still visible if the overlay has been detached.
  This is problematic if the overlay pane element has an `height | wídth` set from the state, because now the overlay element may block clicks on the page and overlap the actual content.

* The issue isn't noticable for the `select` and other overlay components, because those don't specify a `height | width` in their state.
   Nevertheless the pane elements are still visible, but just have no height and width set.

Fixes #2739

Author: devversion

src/lib/core/overlay/overlay-directives.spec.ts

@@ -29,16 +29,25 @@ describe('Overlay directives', () => {
     fixture.detectChanges();
   });
 
+  /** Returns the current open overlay pane element. */
+  function getPaneElement() {
+    return overlayContainerElement.firstElementChild as HTMLElement;
+  }
+
   it(`should attach the overlay based on the open property`, () => {
     fixture.componentInstance.isOpen = true;
     fixture.detectChanges();
 
     expect(overlayContainerElement.textContent).toContain('Menu content');
+    expect(getPaneElement().style.visibility)
+      .toBeFalsy('Expected the overlay pane to be visible when attached.');
 
     fixture.componentInstance.isOpen = false;
     fixture.detectChanges();
 
     expect(overlayContainerElement.textContent).toBe('');
+    expect(getPaneElement().style.visibility)
+      .toBe('hidden', 'Expected the overlay pane to be hidden when detached.');
   });
 
   it('should destroy the overlay when the directive is destroyed', () => {
@@ -47,6 +56,8 @@ describe('Overlay directives', () => {
     fixture.destroy();
 
     expect(overlayContainerElement.textContent.trim()).toBe('');
+    expect(getPaneElement())
+      .toBeFalsy('Expected the overlay pane element to be removed when disposed.');
   });
 
   it('should use a connected position strategy with a default set of positions', () => {

src/lib/core/overlay/overlay-ref.ts

@@ -35,10 +35,15 @@ export class OverlayRef implements PortalHost {
     }
 
     let attachResult = this._portalHost.attach(portal);
+
+    // Update the pane element with the given state configuration.
     this.updateSize();
     this.updateDirection();
     this.updatePosition();
 
+    // Make the pane element visible when overlay is attached.
+    this._toggleVisibility(true);
+
     return attachResult;
   }
 
@@ -48,6 +53,12 @@ export class OverlayRef implements PortalHost {
    */
   detach(): Promise<any> {
     this._detachBackdrop();
+
+    // When the overlay is detached, the pane element should be invisible.
+    // This is necessary because otherwise the pane element can cover the page and disable
+    // pointer events. Depends on the position strategy and the applied pane boundaries.
+    this._toggleVisibility(false);
+
     return this._portalHost.detach();
   }
 
@@ -115,6 +126,11 @@ export class OverlayRef implements PortalHost {
     }
   }
 
+  /** Toggles the visibility of the overlay pane element. */
+  private _toggleVisibility(isVisible: boolean) {
+    this._pane.style.visibility = isVisible ? null : 'hidden';
+  }
+
   /** Attaches a backdrop for this overlay. */
   private _attachBackdrop() {
     this._backdropElement = document.createElement('div');

src/lib/core/overlay/overlay.spec.ts

@@ -62,6 +62,23 @@ describe('Overlay', () => {
     expect(overlayContainerElement.textContent).toBe('');
   });
 
+  it('should hide the pane element if the overlay is detached', () => {
+    let overlayRef = overlay.create();
+    let paneElement = overlayRef.overlayElement;
+
+    overlayRef.attach(componentPortal);
+
+    expect(paneElement.childNodes.length).not.toBe(0);
+    expect(paneElement.style.visibility)
+      .toBeFalsy('Expected the overlay pane to be visible when attached.');
+
+    overlayRef.detach();
+
+    expect(paneElement.childNodes.length).toBe(0);
+    expect(paneElement.style.visibility)
+      .toBe('hidden', 'Expected the overlay pane to be hidden when detached.');
+  });
+
   it('should open multiple overlays', () => {
     let pizzaOverlayRef = overlay.create();
     pizzaOverlayRef.attach(componentPortal);

src/lib/core/portal/dom-portal-host.ts

@@ -93,11 +93,14 @@ export class DomPortalHost extends BasePortalHost {
     let viewContainer = portal.viewContainerRef;
     let viewRef = viewContainer.createEmbeddedView(portal.templateRef);
 
+    // The method `createEmbeddedView` will add the view as a child of the viewContainer.
+    // But for the DomPortalHost the view can be added everywhere in the DOM (e.g Overlay Container)
+    // To move the view to the specified host element. We just re-append the existing root nodes.
     viewRef.rootNodes.forEach(rootNode => this._hostDomElement.appendChild(rootNode));
 
     this.setDisposeFn((() => {
       let index = viewContainer.indexOf(viewRef);
-      if (index != -1) {
+      if (index !== -1) {
         viewContainer.remove(index);
       }
     }));