feat(select, autocomplete): ability to change scroll strategy (#2567)

akveo · Dec 18, 2020 · d10275b · d10275b
1 parent c1aafb9
commit d10275b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/src/framework/theme/components/autocomplete/autocomplete.directive.ts b/src/framework/theme/components/autocomplete/autocomplete.directive.ts
@@ -15,16 +15,16 @@ import {
   HostListener,
   Input,
   OnDestroy,
-  Optional,
   QueryList,
   Renderer2,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { merge, Subject } from 'rxjs';
+import { filter, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
+
 import { NbOverlayRef, NbScrollStrategy } from '../cdk/overlay/mapping';
 import { NbTrigger, NbTriggerStrategy, NbTriggerStrategyBuilderService } from '../cdk/overlay/overlay-trigger';
 import { NbOverlayService } from '../cdk/overlay/overlay-service';
-import { filter, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
-import { merge, Subject } from 'rxjs';
 import { ENTER, ESCAPE } from '../cdk/keycodes/keycodes';
 import {
   NbAdjustableConnectedPositionStrategy,
@@ -37,9 +37,10 @@ import {
   NbActiveDescendantKeyManagerFactoryService,
   NbKeyManagerActiveItemMode,
 } from '../cdk/a11y/descendant-key-manager';
-import { NbAutocompleteComponent } from './autocomplete.component';
+import { NbScrollStrategies } from '../cdk/adapter/block-scroll-strategy-adapter';
 import { NbOptionComponent } from '../option/option.component';
 import { convertToBoolProperty } from '../helpers';
+import { NbAutocompleteComponent } from './autocomplete.component';
 
 /**
  * The `NbAutocompleteDirective` provides a capability to expand input with
@@ -153,6 +154,11 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
   }
   protected _focusInputOnValueChange: boolean = true;
 
+  /**
+   * Determines options overlay scroll strategy.
+   **/
+  @Input() scrollStrategy: NbScrollStrategies = 'block';
+
   @HostBinding('class.nb-autocomplete-position-top')
   get top(): boolean {
     return this.isOpen && this.autocomplete.options.length && this.autocomplete.overlayPosition === NbPosition.TOP;
@@ -440,6 +446,6 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
   }
 
   protected createScrollStrategy(): NbScrollStrategy {
-    return this.overlay.scrollStrategies.block();
+    return this.overlay.scrollStrategies[this.scrollStrategy]();
   }
 }
diff --git a/src/framework/theme/components/cdk/adapter/block-scroll-strategy-adapter.ts b/src/framework/theme/components/cdk/adapter/block-scroll-strategy-adapter.ts
@@ -41,3 +41,5 @@ export class NbScrollStrategyOptions extends ScrollStrategyOptions {
 
   block = () => new NbBlockScrollStrategyAdapter(this.document, this.viewportRuler, this.scrollService);
 }
+
+export type NbScrollStrategies = keyof Pick<NbScrollStrategyOptions, 'noop' | 'close' | 'block' | 'reposition'>;
diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts
@@ -54,6 +54,7 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers';
 import { NB_SELECT_INJECTION_TOKEN } from './select-injection-tokens';
 import { NbFormFieldControl, NbFormFieldControlConfig } from '../form-field/form-field-control';
 import { NbFocusMonitor } from '../cdk/a11y/a11y.module';
+import { NbScrollStrategies } from '../cdk/adapter/block-scroll-strategy-adapter';
 
 export type NbSelectCompareFunction<T = any> = (v1: any, v2: any) => boolean;
 export type NbSelectAppearance = 'outline' | 'filled' | 'hero';
@@ -679,6 +680,11 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
    **/
   @Input() optionsOverlayOffset = 8;
 
+  /**
+   * Determines options overlay scroll strategy.
+   **/
+  @Input() scrollStrategy: NbScrollStrategies = 'block';
+
   @HostBinding('class')
   get additionalClasses(): string[] {
     if (this.statusService.isCustomStatus(this.status)) {
@@ -1044,7 +1050,7 @@ export class NbSelectComponent implements OnChanges, AfterViewInit, AfterContent
   }
 
   protected createScrollStrategy(): NbScrollStrategy {
-    return this.overlay.scrollStrategies.block();
+    return this.overlay.scrollStrategies[this.scrollStrategy]();
   }
 
   protected createTriggerStrategy(): NbTriggerStrategy {