diff --git a/src/modules/flyout/fixtures/flyout-sample-context.fixture.ts b/src/modules/flyout/fixtures/flyout-sample-context.fixture.ts index 0637899e3..ff65242ee 100644 --- a/src/modules/flyout/fixtures/flyout-sample-context.fixture.ts +++ b/src/modules/flyout/fixtures/flyout-sample-context.fixture.ts @@ -1,3 +1,4 @@ export class SkyFlyoutTestSampleContext { public name: string; + public showIframe: boolean; } diff --git a/src/modules/flyout/fixtures/flyout-sample.component.fixture.ts b/src/modules/flyout/fixtures/flyout-sample.component.fixture.ts index e57f23ca0..f32ba3097 100644 --- a/src/modules/flyout/fixtures/flyout-sample.component.fixture.ts +++ b/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 }}' }) export class SkyFlyoutTestSampleComponent { constructor( diff --git a/src/modules/flyout/flyout-adapter.service.ts b/src/modules/flyout/flyout-adapter.service.ts index b2dea3ef8..7a92dd9d1 100644 --- a/src/modules/flyout/flyout-adapter.service.ts +++ b/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'; + } + } } diff --git a/src/modules/flyout/flyout.component.spec.ts b/src/modules/flyout/flyout.component.spec.ts index 36f9f5ecf..237f23f5f 100644 --- a/src/modules/flyout/flyout.component.spec.ts +++ b/src/modules/flyout/flyout.component.spec.ts @@ -33,11 +33,11 @@ describe('Flyout component', () => { let fixture: ComponentFixture; let flyoutService: SkyFlyoutService; - function openFlyout(config: SkyFlyoutConfig = {}): SkyFlyoutInstance { + function openFlyout(config: SkyFlyoutConfig = {}, showIframe?: boolean): SkyFlyoutInstance { 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(); diff --git a/src/modules/flyout/flyout.component.ts b/src/modules/flyout/flyout.component.ts index c34eaae04..3cfdc481e 100644 --- a/src/modules/flyout/flyout.component.ts +++ b/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(component: T): SkyFlyoutInstance {