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 {