feat(select): options search (#3091)

src/app/playground-components.ts

@@ -1161,6 +1161,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
         component: 'SelectIconComponent',
         name: 'Select Icon',
       },
+      {
+        path: 'select-search-showcase.component',
+        link: '/select/select-search-showcase.component',
+        component: 'SelectSearchShowcaseComponent',
+        name: 'Select Search Showcase',
+      },
     ],
   },
   {

src/framework/theme/components/form-field/form-field.component.scss

@@ -7,6 +7,9 @@
 :host {
   display: flex;
   align-items: center;
+  &[hidden] {
+    display: none;
+  }
 }
 
 .nb-form-control-container {

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

@@ -8,6 +8,9 @@
 
 :host {
   display: flex;
+  &[hidden] {
+    display: none;
+  }
 
   &:hover {
     cursor: pointer;

src/framework/theme/components/select/select.component.html

@@ -1,4 +1,5 @@
 <button
+  [hidden]="isOptionSearchInputAllowed"
   [disabled]="disabled"
   [ngClass]="selectButtonClasses"
   (blur)="trySetTouched()"
@@ -29,6 +30,25 @@
   </nb-icon>
 </button>
 
+<nb-form-field [hidden]="!isOptionSearchInputAllowed">
+  <input
+    nbInput
+    fullWidth
+    #optionSearchInput
+    [value]="selectionView"
+    [placeholder]="placeholder"
+    [status]="status"
+    [shape]="shape"
+    [fieldSize]="size"
+    (blur)="trySetTouched()"
+    (keydown.arrowDown)="show()"
+    (keydown.arrowUp)="show()"
+    (click)="$event.stopPropagation()"
+    (input)="onInput($event)"
+  />
+  <nb-icon nbSuffix icon="chevron-up-outline" pack="nebular-essentials" aria-hidden="true"> </nb-icon>
+</nb-form-field>
+
 <nb-option-list
   *nbPortal
   [size]="size"

src/framework/theme/components/select/select.component.scss

@@ -34,7 +34,8 @@
   }
 }
 
-.select-button {
+.select-button,
+nb-form-field {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -43,7 +44,7 @@
   white-space: nowrap;
 }
 
-nb-icon {
+nb-icon:not([nbSuffix]) {
   font-size: 1.5em;
   position: absolute;
   top: 50%;
@@ -53,6 +54,6 @@ nb-icon {
   @include nb-component-animation(transform);
 }
 
-:host(.open) nb-icon {
+:host(.open) nb-icon:not([nbSuffix]) {
   transform: translateY(-50%) rotate(180deg);
 }

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

@@ -30,7 +30,7 @@ import {
 } from '@angular/core';
 import { NgClass } from '@angular/common';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { merge, Subject, BehaviorSubject, from } from 'rxjs';
+import { merge, Subject, BehaviorSubject, from, combineLatest } from 'rxjs';
 import { startWith, switchMap, takeUntil, filter, map, finalize, take } from 'rxjs/operators';
 
 import { NbStatusService } from '../../services/status.service';
@@ -697,6 +697,18 @@ export class NbSelectComponent
    **/
   @Input() scrollStrategy: NbScrollStrategies = 'block';
 
+  /**
+   * Experimental input.
+   * Could be changed without any prior notice.
+   * Use at your own risk.
+   *
+   * It replaces the button with input when the select is opened.
+   * That replacement provides a very basic API to implement options filtering functionality.
+   * Filtering itself isn't implemented inside select.
+   * So it should be implemented by the user.
+   */
+  @Input() withOptionSearch: boolean = false;
+
   @HostBinding('class')
   get additionalClasses(): string[] {
     if (this.statusService.isCustomStatus(this.status)) {
@@ -709,6 +721,9 @@ export class NbSelectComponent
    * Will be emitted when selected value changes.
    * */
   @Output() selectedChange: EventEmitter<any> = new EventEmitter();
+  @Output() selectOpen: EventEmitter<void> = new EventEmitter();
+  @Output() selectClose: EventEmitter<void> = new EventEmitter();
+  @Output() optionSearchChange: EventEmitter<string> = new EventEmitter();
 
   /**
    * List of `NbOptionComponent`'s components passed as content.
@@ -726,7 +741,8 @@ export class NbSelectComponent
    * */
   @ViewChild(NbPortalDirective) portal: NbPortalDirective;
 
-  @ViewChild('selectButton', { read: ElementRef }) button: ElementRef<HTMLButtonElement>;
+  @ViewChild('selectButton', { read: ElementRef }) button: ElementRef<HTMLButtonElement> | undefined;
+  @ViewChild('optionSearchInput', { read: ElementRef }) optionSearchInput: ElementRef<HTMLInputElement> | undefined;
 
   /**
    * Determines is select opened.
@@ -736,6 +752,10 @@ export class NbSelectComponent
     return this.ref && this.ref.hasAttached();
   }
 
+  get isOptionSearchInputAllowed(): boolean {
+    return this.withOptionSearch && this.isOpen && !this.multiple;
+  }
+
   /**
    * List of selected options.
    * */
@@ -822,6 +842,9 @@ export class NbSelectComponent
    * Returns width of the select button.
    * */
   get hostWidth(): number {
+    if (this.isOptionSearchInputAllowed) {
+      return this.optionSearchInput.nativeElement.getBoundingClientRect().width;
+    }
     return this.button.nativeElement.getBoundingClientRect().width;
   }
 
@@ -849,7 +872,7 @@ export class NbSelectComponent
       return this.selectionModel.map((option: NbOptionComponent) => option.content).join(', ');
     }
 
-    return this.selectionModel[0].content;
+    return this.selectionModel[0]?.content ?? '';
   }
 
   ngOnChanges({ disabled, status, size, fullWidth }: SimpleChanges) {
@@ -911,14 +934,24 @@ export class NbSelectComponent
     }
   }
 
+  onInput(event: Event) {
+    this.optionSearchChange.emit((event.target as HTMLInputElement).value);
+  }
+
   show() {
     if (this.shouldShow()) {
       this.attachToOverlay();
 
       this.positionStrategy.positionChange.pipe(take(1), takeUntil(this.destroy$)).subscribe(() => {
-        this.setActiveOption();
+        if (this.isOptionSearchInputAllowed) {
+          this.optionSearchInput.nativeElement.focus();
+        } else {
+          this.setActiveOption();
+        }
       });
 
+      this.selectOpen.emit();
+
       this.cd.markForCheck();
     }
   }
@@ -927,6 +960,10 @@ export class NbSelectComponent
     if (this.isOpen) {
       this.ref.detach();
       this.cd.markForCheck();
+      this.selectClose.emit();
+
+      this.optionSearchInput.nativeElement.value = this.selectionView;
+      this.optionSearchChange.emit('');
     }
   }
 
@@ -1061,8 +1098,11 @@ export class NbSelectComponent
   }
 
   protected createPositionStrategy(): NbAdjustableConnectedPositionStrategy {
+    const element: ElementRef<HTMLInputElement | HTMLButtonElement> = this.withOptionSearch
+      ? this.optionSearchInput
+      : this.button;
     return this.positionBuilder
-      .connectedTo(this.button)
+      .connectedTo(element)
       .position(NbPosition.BOTTOM)
       .offset(this.optionsOverlayOffset)
       .adjustment(NbAdjustment.VERTICAL);
@@ -1123,9 +1163,9 @@ export class NbSelectComponent
       )
       .subscribe((event: KeyboardEvent) => {
         if (event.keyCode === ESCAPE) {
-          this.button.nativeElement.focus();
           this.hide();
-        } else {
+          this.button.nativeElement.focus();
+        } else if (!this.isOptionSearchInputAllowed) {
           this.keyManager.onKeydown(event);
         }
       });
@@ -1137,11 +1177,21 @@ export class NbSelectComponent
   }
 
   protected subscribeOnButtonFocus() {
-    this.focusMonitor
-      .monitor(this.button)
+    const buttonFocus$ = this.focusMonitor.monitor(this.button).pipe(
+      map((origin) => !!origin),
+      startWith(false),
+      finalize(() => this.focusMonitor.stopMonitoring(this.button)),
+    );
+
+    const filterInputFocus$ = this.focusMonitor.monitor(this.optionSearchInput).pipe(
+      map((origin) => !!origin),
+      startWith(false),
+      finalize(() => this.focusMonitor.stopMonitoring(this.button)),
+    );
+
+    combineLatest([buttonFocus$, filterInputFocus$])
       .pipe(
-        map((origin) => !!origin),
-        finalize(() => this.focusMonitor.stopMonitoring(this.button)),
+        map(([buttonFocus, filterInputFocus]) => buttonFocus || filterInputFocus),
         takeUntil(this.destroy$),
       )
       .subscribe(this.focused$);

src/framework/theme/components/select/select.module.ts

@@ -8,11 +8,9 @@ import { NbButtonModule } from '../button/button.module';
 import { NbSelectComponent, NbSelectLabelComponent } from './select.component';
 import { NbOptionModule } from '../option/option-list.module';
 import { NbIconModule } from '../icon/icon.module';
+import { NbFormFieldModule } from '../form-field/form-field.module';
 
-const NB_SELECT_COMPONENTS = [
-  NbSelectComponent,
-  NbSelectLabelComponent,
-];
+const NB_SELECT_COMPONENTS = [NbSelectComponent, NbSelectLabelComponent];
 
 @NgModule({
   imports: [
@@ -23,12 +21,9 @@ const NB_SELECT_COMPONENTS = [
     NbCardModule,
     NbIconModule,
     NbOptionModule,
+    NbFormFieldModule,
   ],
-  exports: [
-    ...NB_SELECT_COMPONENTS,
-    NbOptionModule,
-  ],
+  exports: [...NB_SELECT_COMPONENTS, NbOptionModule],
   declarations: [...NB_SELECT_COMPONENTS],
 })
-export class NbSelectModule {
-}
+export class NbSelectModule {}