fix(select): disable layout scrolling (#1012)

Closes #992

scripts/gulp/tasks/bundle/rollup-config.ts

@@ -22,6 +22,7 @@ const ROLLUP_GLOBALS = {
   '@angular/cdk/portal': 'ng.cdk.portal',
   '@angular/cdk/a11y': 'ng.cdk.a11y',
   '@angular/cdk/bidi': 'ng.cdk.bidi',
+  '@angular/cdk/scrolling': 'ng.cdk.scrolling',
 
 
   // RxJS dependencies

src/framework/theme/components/cdk/adapter/adapter.module.ts

@@ -1,23 +1,24 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { OverlayContainer, ScrollDispatcher } from '@angular/cdk/overlay';
+import { OverlayContainer, ScrollDispatcher, ScrollStrategyOptions } from '@angular/cdk/overlay';
 
 import { NbOverlayContainerAdapter } from './overlay-container-adapter';
 import { NbScrollDispatcherAdapter } from './scroll-dispatcher-adapter';
 import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
-import { NbBlockScrollStrategyAdapter } from './block-scroll-strategy-adapter';
+import { NbBlockScrollStrategyAdapter, NbScrollStrategyOptions } from './block-scroll-strategy-adapter';
 
 
 @NgModule({})
 export class NbCdkAdapterModule {
   static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders> {
+    return <ModuleWithProviders>{
       ngModule: NbCdkAdapterModule,
       providers: [
         NbViewportRulerAdapter,
         NbOverlayContainerAdapter,
         NbBlockScrollStrategyAdapter,
         { provide: OverlayContainer, useExisting: NbOverlayContainerAdapter },
         { provide: ScrollDispatcher, useClass: NbScrollDispatcherAdapter },
+        { provide: ScrollStrategyOptions, useClass: NbScrollStrategyOptions },
       ],
     };
   }

src/framework/theme/components/cdk/adapter/block-scroll-strategy-adapter.ts

@@ -1,11 +1,42 @@
-import { Injectable, Inject } from '@angular/core';
-import { BlockScrollStrategy } from '@angular/cdk/overlay';
+import { Inject, Injectable, NgZone } from '@angular/core';
+import { BlockScrollStrategy, ScrollDispatcher, ScrollStrategyOptions } from '@angular/cdk/overlay';
+
+import { NbLayoutScrollService } from '../../../services/scroll.service';
 import { NB_DOCUMENT } from '../../../theme.options';
 import { NbViewportRulerAdapter } from './viewport-ruler-adapter';
 
+
+/**
+ * Overrides default block scroll strategy because default strategy blocks scrolling on the body only.
+ * But Nebular has its own scrollable container - nb-layout. So, we need to block scrolling in it to.
+ * */
 @Injectable()
 export class NbBlockScrollStrategyAdapter extends BlockScrollStrategy {
-  constructor(ruler: NbViewportRulerAdapter, @Inject(NB_DOCUMENT) document) {
-    super(ruler, document);
+  constructor(@Inject(NB_DOCUMENT) document: any,
+              viewportRuler: NbViewportRulerAdapter,
+              protected scrollService: NbLayoutScrollService) {
+    super(viewportRuler, document);
+  }
+
+  enable() {
+    super.enable();
+    this.scrollService.scrollable(false);
+  }
+
+  disable() {
+    super.disable();
+    this.scrollService.scrollable(true);
   }
 }
+
+export class NbScrollStrategyOptions extends ScrollStrategyOptions {
+  constructor(protected scrollService: NbLayoutScrollService,
+              protected scrollDispatcher: ScrollDispatcher,
+              protected viewportRuler: NbViewportRulerAdapter,
+              protected ngZone: NgZone,
+              @Inject(NB_DOCUMENT) protected document) {
+    super(scrollDispatcher, viewportRuler, ngZone, document);
+  }
+
+  block = () => new NbBlockScrollStrategyAdapter(this.document, this.viewportRuler, this.scrollService);
+}

src/framework/theme/components/dialog/dialog.service.spec.ts

@@ -1,13 +1,19 @@
 import { Component, NgModule } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
-import { NbOverlayContainerAdapter, NbOverlayService } from '../cdk';
+import { NbOverlayContainerAdapter, NbOverlayService, NbViewportRulerAdapter } from '../cdk';
 import { NbDialogService } from './dialog.service';
 import { NbDialogModule } from './dialog.module';
 import { NbThemeModule } from '../../theme.module';
 import { NB_DOCUMENT } from '../../theme.options';
 
 
+export class NbViewportRulerMockAdapter extends NbViewportRulerAdapter {
+  getViewportSize(): Readonly<{ width: number; height: number; }> {
+    return { width: 1600, height: 900 };
+  }
+}
+
 @Component({ selector: 'nb-test-dialog', template: '<button class="test-focusable-button"></button>' })
 class NbTestDialogComponent {
 }
@@ -36,6 +42,7 @@ describe('dialog-service', () => {
         NbThemeModule.forRoot(),
         NbDialogModule.forRoot(),
       ],
+      providers: [{ provide: NbViewportRulerAdapter, useClass: NbViewportRulerMockAdapter }],
     });
 
     dialog = TestBed.get(NbDialogService);

src/framework/theme/components/layout/_layout.component.theme.scss

@@ -48,6 +48,10 @@
     }
   }
 
+  nb-layout.overlay-scroll-block .scrollable-container {
+    overflow: hidden;
+  }
+
   .layout {
     // TODO: check this prop name
     min-width: nb-theme(layout-window-mode-min-width);

src/framework/theme/components/layout/layout.component.ts

@@ -297,6 +297,7 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
   @HostBinding('class.window-mode') windowModeValue: boolean = false;
   @HostBinding('class.with-scroll') withScrollValue: boolean = false;
   @HostBinding('class.with-subheader') withSubheader: boolean = false;
+  @HostBinding('class.overlay-scroll-block') overlayScrollBlock: boolean = false;
 
   /**
    * Defines whether the layout columns will be centered after some width
@@ -436,6 +437,15 @@ export class NbLayoutComponent implements AfterViewInit, OnDestroy {
         this.scroll(0, 0);
       });
 
+    this.scrollService
+      .onScrollableChange()
+      .pipe(
+        filter(() => this.withScrollValue),
+      )
+      .subscribe((scrollable: boolean) => {
+        this.overlayScrollBlock = !scrollable;
+      });
+
     if (isPlatformBrowser(this.platformId)) {
       // trigger first time so that after the change we have the initial value
       this.themeService.changeWindowWidth(this.window.innerWidth);

src/framework/theme/services/scroll.service.ts

@@ -35,6 +35,7 @@ export class NbLayoutScrollService {
   private scrollPositionReq$ = new Subject<any>();
   private manualScroll$ = new Subject<NbScrollPosition>();
   private scroll$ = new Subject<any>();
+  private scrollable$ = new Subject<boolean>();
 
   /**
    * Returns scroll position
@@ -86,11 +87,19 @@ export class NbLayoutScrollService {
     return this.scrollPositionReq$;
   }
 
+  onScrollableChange(): Observable<boolean> {
+    return this.scrollable$.pipe(share());
+  }
+
   /**
    * @private
    * @param {any} event
    */
   fireScrollChange(event: any) {
     this.scroll$.next(event);
   }
+
+  scrollable(scrollable: boolean) {
+    this.scrollable$.next(scrollable);
+  }
 }