Revert "110088: new implementation for keyboard support in dropdowns"

This reverts commit 2d0d6dd.

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -27,7 +27,7 @@
            (keydown)="selectOnKeyDown($event, sdRef)">
   </div>
 
-  <div #dropdownMenu ngbDropdownMenu
+  <div ngbDropdownMenu
        class="dropdown-menu scrollable-dropdown-menu w-100"
        [attr.aria-label]="model.placeholder">
     <div class="scrollable-menu"
@@ -41,8 +41,7 @@
          [scrollWindow]="false">
 
       <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button>
-      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList; let i = index"
-              [class.active]="i === selectedIndex"
+      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList"
               (keydown.enter)="onSelect(listEntry); sdRef.close()" (mousedown)="onSelect(listEntry); sdRef.close()"
               title="{{ listEntry.display }}" role="option"
               [attr.id]="listEntry.display == (currentValue|async) ? ('combobox_' + id + '_selected') : null">

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts

@@ -1,17 +1,8 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
-  ElementRef
-} from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 
 import { Observable, of as observableOf } from 'rxjs';
-import { catchError, map, tap } from 'rxjs/operators';
+import { catchError, distinctUntilChanged, map, tap } from 'rxjs/operators';
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 import { DynamicFormLayoutService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 
@@ -37,8 +28,6 @@ import { FormFieldMetadataValueObject } from '../../../models/form-field-metadat
   templateUrl: './dynamic-scrollable-dropdown.component.html'
 })
 export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyComponent implements OnInit {
-  @ViewChild('dropdownMenu', { read: ElementRef }) dropdownMenu: ElementRef;
-
   @Input() bindId = true;
   @Input() group: UntypedFormGroup;
   @Input() model: DynamicScrollableDropdownModel;
@@ -51,9 +40,6 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   public loading = false;
   public pageInfo: PageInfo;
   public optionsList: any;
-  public inputText: string = null;
-  public selectedIndex = 0;
-  public acceptableKeys = ['Space', 'NumpadMultiply', 'NumpadAdd', 'NumpadSubtract', 'NumpadDecimal', 'Semicolon', 'Equal', 'Comma', 'Minus', 'Period', 'Quote', 'Backquote'];
 
   constructor(protected vocabularyService: VocabularyService,
               protected cdr: ChangeDetectorRef,
@@ -68,26 +54,32 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    */
   ngOnInit() {
     this.updatePageInfo(this.model.maxOptions, 1);
-    this.loadOptions();
-  }
-
-  loadOptions() {
-    this.loading = true;
-    this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
+    this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.pageInfo).pipe(
       getFirstSucceededRemoteDataPayload(),
-      catchError(() => observableOf(buildPaginatedList(new PageInfo(), []))),
-      tap(() => this.loading = false)
-    ).subscribe((list: PaginatedList<VocabularyEntry>) => {
-      this.optionsList = list.page;
-      this.updatePageInfo(
-        list.pageInfo.elementsPerPage,
-        list.pageInfo.currentPage,
-        list.pageInfo.totalElements,
-        list.pageInfo.totalPages
-      );
-      this.selectedIndex = 0;
-      this.cdr.detectChanges();
-    });
+      catchError(() => observableOf(buildPaginatedList(
+        new PageInfo(),
+        []
+        ))
+      ))
+      .subscribe((list: PaginatedList<VocabularyEntry>) => {
+        this.optionsList = list.page;
+        if (this.model.value) {
+          this.setCurrentValue(this.model.value, true);
+        }
+
+        this.updatePageInfo(
+          list.pageInfo.elementsPerPage,
+          list.pageInfo.currentPage,
+          list.pageInfo.totalElements,
+          list.pageInfo.totalPages
+        );
+        this.cdr.detectChanges();
+      });
+
+    this.group.get(this.model.id).valueChanges.pipe(distinctUntilChanged())
+      .subscribe((value) => {
+        this.setCurrentValue(value);
+      });
   }
 
   /**
@@ -102,30 +94,10 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   openDropdown(sdRef: NgbDropdown) {
     if (!this.model.readOnly) {
       this.group.markAsUntouched();
-      this.inputText = null;
-      this.updatePageInfo(this.model.maxOptions, 1);
-      this.loadOptions();
       sdRef.open();
     }
   }
 
-  navigateDropdown(event: KeyboardEvent) {
-    if (event.key === 'ArrowDown') {
-      this.selectedIndex = Math.min(this.selectedIndex + 1, this.optionsList.length - 1);
-    } else if (event.key === 'ArrowUp') {
-      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
-    }
-    this.scrollToSelected();
-  }
-
-  scrollToSelected() {
-    const dropdownItems = this.dropdownMenu.nativeElement.querySelectorAll('.dropdown-item');
-    const selectedItem = dropdownItems[this.selectedIndex];
-    if (selectedItem) {
-      selectedItem.scrollIntoView({ block: 'nearest' });
-    }
-  }
-
   /**
    * KeyDown handler to allow toggling the dropdown via keyboard
    * @param event KeyboardEvent
@@ -134,54 +106,13 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   selectOnKeyDown(event: KeyboardEvent, sdRef: NgbDropdown) {
     const keyName = event.key;
 
-    if (keyName === 'Enter') {
+    if (keyName === ' ' || keyName === 'Enter') {
       event.preventDefault();
       event.stopPropagation();
-      if (sdRef.isOpen()) {
-        this.onSelect(this.optionsList[this.selectedIndex]);
-        sdRef.close();
-      } else {
-        sdRef.open();
-      }
+      sdRef.toggle();
     } else if (keyName === 'ArrowDown' || keyName === 'ArrowUp') {
-      event.preventDefault();
-      event.stopPropagation();
-      this.navigateDropdown(event);
-    } else if (keyName === 'Backspace') {
-      this.removeKeyFromInput();
-    } else if (this.isAcceptableKey(keyName)) {
-      this.addKeyToInput(keyName);
-    }
-  }
-
-  addKeyToInput(keyName: string) {
-    if (this.inputText === null) {
-      this.inputText = '';
-    }
-    this.inputText += keyName;
-    // When a new key is added, we need to reset the page info
-    this.updatePageInfo(this.model.maxOptions, 1);
-    this.loadOptions();
-  }
-
-  removeKeyFromInput() {
-    if (this.inputText !== null) {
-      this.inputText = this.inputText.slice(0, -1);
-      if (this.inputText === '') {
-        this.inputText = null;
-      }
-      this.loadOptions();
-    }
-  }
-
-
-  isAcceptableKey(keyPress: string): boolean {
-    // allow all letters and numbers
-    if (keyPress.length === 1 && keyPress.match(/^[a-zA-Z0-9]*$/)) {
-      return true;
+      this.openDropdown(sdRef);
     }
-    // Some other characters like space, dash, etc should be allowed as well
-    return this.acceptableKeys.includes(keyPress);
   }
 
   /**
@@ -196,7 +127,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         this.pageInfo.totalElements,
         this.pageInfo.totalPages
       );
-      this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
+      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.pageInfo).pipe(
         getFirstSucceededRemoteDataPayload(),
         catchError(() => observableOf(buildPaginatedList(
           new PageInfo(),