feat(autocomplete): ability to scroll options-list with arrow keys

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

@@ -26,6 +26,8 @@ import { takeUntil } from 'rxjs/operators';
 import { NbComponentSize } from '../component-size';
 import { NbPosition } from '../cdk/overlay/overlay-position';
 import { NbOptionComponent } from '../option/option.component';
+import { NbOptionListComponent } from '../option/option-list.component';
+import { NbOptionGroupComponent } from '../option/option-group.component';
 import { NbPortalDirective } from '../cdk/overlay/mapping';
 
 // Component class scoped counter for aria attributes.
@@ -126,11 +128,15 @@ export class NbAutocompleteComponent<T> implements AfterContentInit, OnDestroy {
    * */
   @ContentChildren(NbOptionComponent, { descendants: true }) options: QueryList<NbOptionComponent<T>>;
 
+  @ContentChildren(NbOptionGroupComponent, { descendants: true }) optionGroups: QueryList<NbOptionGroupComponent>;
+
   /**
    * NbOptionList with options content.
    * */
   @ViewChild(NbPortalDirective) portal: NbPortalDirective;
 
+  @ViewChild(NbOptionListComponent) list: NbOptionListComponent<T>;
+
   constructor(protected cd: ChangeDetectorRef) {}
 
   ngAfterContentInit() {

src/framework/theme/components/autocomplete/autocomplete.directive.ts

@@ -373,6 +373,7 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
           this.handleInputValueUpdate(activeItem.value, true);
         } else {
           this.keyManager.onKeydown(event);
+          this.scrollToOption(this.keyManager.activeItemIndex || 0);
         }
       });
   }
@@ -430,4 +431,66 @@ export class NbAutocompleteDirective<T> implements OnDestroy, AfterViewInit, Con
   protected shouldShow(): boolean {
     return this.isClosed && this.autocomplete.options.length > 0;
   }
+
+  private scrollToOption(index: number): void {
+    const labelCount = this.countGroupLabelsBeforeOption(
+      index,
+      this._autocomplete.options,
+      this._autocomplete.optionGroups,
+    );
+
+    if (index === 0 && labelCount === 1) {
+      // If we are at the first option of the first option group, we scroll the list to the top
+      // to allow the user to read the top group's label.
+      this._autocomplete.list?.setScrollTop(0);
+    } else if (this._autocomplete.list?.list) {
+      const option = this._autocomplete.options.toArray()[index];
+      if (option) {
+        const element = option.getHostElement();
+        const newScrollPosition = this.getOptionScrollPosition(
+          element.offsetTop,
+          element.offsetHeight,
+          this._autocomplete.list.getScrollTop(),
+          this._autocomplete.list.list.nativeElement.offsetHeight,
+        );
+
+        this._autocomplete.list.setScrollTop(newScrollPosition);
+      }
+    }
+  }
+
+  countGroupLabelsBeforeOption(optionIndex: number, options: QueryList<any>, optionGroups: QueryList<any>): number {
+    if (optionGroups.length) {
+      let optionsArray = options.toArray();
+      let groups = optionGroups.toArray();
+      let groupCounter = 0;
+
+      groups.forEach((group, index) => {
+        if (group.options.toArray().includes(optionsArray[optionIndex])) {
+          groupCounter = index + 1;
+        }
+      });
+
+      return groupCounter;
+    }
+
+    return 0;
+  }
+
+  getOptionScrollPosition(
+    optionOffset: number,
+    optionHeight: number,
+    currentScrollPosition: number,
+    portalHeight: number,
+  ): number {
+    if (optionOffset < currentScrollPosition) {
+      return optionOffset;
+    }
+
+    if (optionOffset + optionHeight > currentScrollPosition + portalHeight) {
+      return Math.max(0, optionOffset - portalHeight + optionHeight);
+    }
+
+    return currentScrollPosition;
+  }
 }

src/framework/theme/components/option/option-list.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, HostBinding, ViewChild, ElementRef } from '@angular/core';
 
 import { NbComponentSize } from '../component-size';
 import { NbPosition } from '../cdk/overlay/overlay-position';
@@ -22,18 +22,19 @@ import { NbPosition } from '../cdk/overlay/overlay-position';
 @Component({
   selector: 'nb-option-list',
   template: `
-    <ul class="option-list">
+    <ul class="option-list" #list>
       <ng-content></ng-content>
     </ul>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NbOptionListComponent<T> {
-
   @Input() size: NbComponentSize = 'medium';
 
   @Input() position: NbPosition;
 
+  @ViewChild('list') list: ElementRef;
+
   @HostBinding('class.position-top')
   get positionTop(): boolean {
     return this.position === NbPosition.TOP;
@@ -68,4 +69,14 @@ export class NbOptionListComponent<T> {
   get sizeGiant(): boolean {
     return this.size === 'giant';
   }
+
+  setScrollTop(scrollTop: number): void {
+    if (this.list) {
+      this.list.nativeElement.scrollTop = scrollTop;
+    }
+  }
+
+  getScrollTop(): number {
+    return this.list ? this.list.nativeElement.scrollTop : 0;
+  }
 }

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

@@ -82,16 +82,11 @@ import { NbSelectComponent } from '../select/select.component';
   styleUrls: ['./option.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <nb-checkbox *ngIf="withCheckbox"
-                 [checked]="selected"
-                 [disabled]="disabled"
-                 aria-hidden="true">
-    </nb-checkbox>
+    <nb-checkbox *ngIf="withCheckbox" [checked]="selected" [disabled]="disabled" aria-hidden="true"> </nb-checkbox>
     <ng-content></ng-content>
   `,
 })
 export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbFocusableOption, NbHighlightableOption {
-
   protected disabledByGroup = false;
 
   /**
@@ -132,11 +127,13 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
   @HostBinding('attr.id')
   id: string = `nb-option-${lastOptionId++}`;
 
-  constructor(@Optional() @Inject(NB_SELECT_INJECTION_TOKEN) parent,
-              protected elementRef: ElementRef,
-              protected cd: ChangeDetectorRef,
-              protected zone: NgZone,
-              protected renderer: Renderer2) {
+  constructor(
+    @Optional() @Inject(NB_SELECT_INJECTION_TOKEN) parent,
+    protected elementRef: ElementRef,
+    protected cd: ChangeDetectorRef,
+    protected zone: NgZone,
+    protected renderer: Renderer2,
+  ) {
     this.parent = parent;
   }
 
@@ -146,9 +143,11 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
 
   ngAfterViewInit() {
     // TODO: #2254
-    this.zone.runOutsideAngular(() => setTimeout(() => {
-      this.renderer.addClass(this.elementRef.nativeElement, 'nb-transition');
-    }));
+    this.zone.runOutsideAngular(() =>
+      setTimeout(() => {
+        this.renderer.addClass(this.elementRef.nativeElement, 'nb-transition');
+      }),
+    );
   }
 
   /**
@@ -188,7 +187,7 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
   @HostBinding('class.active')
   get activeClass() {
     return this._active;
-  };
+  }
   protected _active: boolean = false;
 
   @HostListener('click', ['$event'])
@@ -253,4 +252,7 @@ export class NbOptionComponent<T = any> implements OnDestroy, AfterViewInit, NbF
     this.cd.markForCheck();
   }
 
+  getHostElement(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
 }