Added handling for disabling iframes when a flyout is being dragged (#…

…1952)

Resolves #1794

src/modules/flyout/fixtures/flyout-sample-context.fixture.ts

@@ -1,3 +1,4 @@
 export class SkyFlyoutTestSampleContext {
   public name: string;
+  public showIframe: boolean;
 }

src/modules/flyout/fixtures/flyout-sample.component.fixture.ts

@@ -6,7 +6,7 @@ import { SkyFlyoutTestSampleContext } from './flyout-sample-context.fixture';
 
 @Component({
   selector: 'sky-test-flyout-sample',
-  template: '{{ data?.name }}'
+  template: '{{ data?.name }}<iframe src="https://developer.blackbaud.com/skyux/" *ngIf="data?.showIframe"></iframe>'
 })
 export class SkyFlyoutTestSampleComponent {
   constructor(

src/modules/flyout/flyout-adapter.service.ts

@@ -37,4 +37,15 @@ export class SkyFlyoutAdapterService {
       this.renderer.addClass(header.nativeElement, 'sky-flyout-help-shim');
     }
   }
+
+  public toggleIframePointerEvents(enable: boolean): void {
+    // When iframes are present on the page, they may interfere with dragging
+    // temporarily disable pointer events in iframes when dragging starts.
+    // When re-enabling we set to the empty string as it will remove the element styling
+    // and fall back to any css originally given to iframe
+    const iframes = document.querySelectorAll('iframe');
+    for (let i = 0; i < iframes.length; i++) {
+      iframes[i].style.pointerEvents = enable ? '' : 'none';
+    }
+  }
 }

src/modules/flyout/flyout.component.spec.ts

@@ -33,11 +33,11 @@ describe('Flyout component', () => {
   let fixture: ComponentFixture<SkyFlyoutTestComponent>;
   let flyoutService: SkyFlyoutService;
 
-  function openFlyout(config: SkyFlyoutConfig = {}): SkyFlyoutInstance<any> {
+  function openFlyout(config: SkyFlyoutConfig = {}, showIframe?: boolean): SkyFlyoutInstance<any> {
     config = Object.assign({
       providers: [{
         provide: SkyFlyoutTestSampleContext,
-        useValue: { name: 'Sam' }
+        useValue: { name: 'Sam', showIframe: showIframe }
       }]
     }, config);
 
@@ -89,6 +89,10 @@ describe('Flyout component', () => {
     return document.querySelector('.sky-flyout-btn-primary-action') as HTMLElement;
   }
 
+  function getIframe(): HTMLElement {
+    return document.querySelector('iframe') as HTMLElement;
+  }
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -241,6 +245,27 @@ describe('Flyout component', () => {
     })
   );
 
+  it('should set iframe styles correctly during dragging', fakeAsync(() => {
+    openFlyout({}, true);
+    const handleElement = getFlyoutHandleElement();
+    const iframe = getIframe();
+
+    expect(iframe.style.pointerEvents).toBeFalsy();
+    let evt = document.createEvent('MouseEvents');
+    evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
+      0, false, false, false, false, 0, undefined);
+    handleElement.dispatchEvent(evt);
+    fixture.detectChanges();
+    expect(iframe.style.pointerEvents).toBe('none');
+    makeEvent('mousemove', { clientX: 500 });
+    fixture.detectChanges();
+    expect(iframe.style.pointerEvents).toBe('none');
+    makeEvent('mouseup', {});
+    fixture.detectChanges();
+    expect(iframe.style.pointerEvents).toBeFalsy();
+  })
+);
+
   it('should respect minimum and maximum when resizing', fakeAsync(() => {
       openFlyout({ maxWidth: 1000, minWidth: 200});
       const flyoutElement = getFlyoutElement();

src/modules/flyout/flyout.component.ts

@@ -209,6 +209,8 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {
     this.isDragging = true;
     this.xCoord = event.clientX;
 
+    this.adapter.toggleIframePointerEvents(false);
+
     event.preventDefault();
     event.stopPropagation();
   }
@@ -235,6 +237,7 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {
   @HostListener('document:mouseup', ['$event'])
   public onHandleRelease(event: MouseEvent) {
     this.isDragging = false;
+    this.adapter.toggleIframePointerEvents(true);
   }
 
   private createFlyoutInstance<T>(component: T): SkyFlyoutInstance<T> {