Switcht to disable pointerEvents

Author: devversion

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

@@ -39,15 +39,15 @@ describe('Overlay directives', () => {
     fixture.detectChanges();
 
     expect(overlayContainerElement.textContent).toContain('Menu content');
-    expect(getPaneElement().style.visibility)
-      .toBeFalsy('Expected the overlay pane to be visible when attached.');
+    expect(getPaneElement().style.pointerEvents)
+      .toBeFalsy('Expected the overlay pane to enable pointerEvents 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.');
+    expect(getPaneElement().style.pointerEvents)
+      .toBe('none', 'Expected the overlay pane to disable pointerEvents when detached.');
   });
 
   it('should destroy the overlay when the directive is destroyed', () => {

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

@@ -41,8 +41,8 @@ export class OverlayRef implements PortalHost {
     this.updateDirection();
     this.updatePosition();
 
-    // Make the pane element visible when overlay is attached.
-    this._toggleVisibility(true);
+    // Enable pointer events for the overlay pane element.
+    this._togglePointerEvents(true);
 
     return attachResult;
   }
@@ -54,10 +54,10 @@ 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);
+    // When the overlay is detached, the pane element should disable pointer events.
+    // This is necessary because otherwise the pane element will cover the page and disable
+    // pointer events therefore. Depends on the position strategy and the applied pane boundaries.
+    this._togglePointerEvents(false);
 
     return this._portalHost.detach();
   }
@@ -126,9 +126,9 @@ export class OverlayRef implements PortalHost {
     }
   }
 
-  /** Toggles the visibility of the overlay pane element. */
-  private _toggleVisibility(isVisible: boolean) {
-    this._pane.style.visibility = isVisible ? null : 'hidden';
+  /** Toggles the pointer events for the overlay pane element. */
+  private _togglePointerEvents(enablePointer: boolean) {
+    this._pane.style.pointerEvents = enablePointer ? null : 'none';
   }
 
   /** Attaches a backdrop for this overlay. */

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

@@ -62,21 +62,21 @@ describe('Overlay', () => {
     expect(overlayContainerElement.textContent).toBe('');
   });
 
-  it('should hide the pane element if the overlay is detached', () => {
+  it('should disable pointer events of the pane element if 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.');
+    expect(paneElement.style.pointerEvents)
+      .toBeFalsy('Expected the overlay pane to enable pointerEvents 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.');
+    expect(paneElement.style.pointerEvents)
+      .toBe('none', 'Expected the overlay pane to disable pointerEvents when detached.');
   });
 
   it('should open multiple overlays', () => {