Fixed issue #1 and some other fixes

src/app/shared/input-suggestions/input-suggestions.component.ts

@@ -9,13 +9,6 @@ import {
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 import { hasValue, isNotEmpty } from '../empty.util';
-import { ActivatedRoute } from '@angular/router';
-
-/**
- * This component renders a simple item page.
- * The route parameter 'id' is used to request the item it represents.
- * All fields of the item that should be displayed, are defined in its template.
- */
 
 @Component({
   selector: 'ds-input-suggestions',
@@ -23,28 +16,92 @@ import { ActivatedRoute } from '@angular/router';
   templateUrl: './input-suggestions.component.html'
 })
 
+/**
+ * Component representing a form with a autocomplete functionality
+ */
 export class InputSuggestionsComponent {
+  /**
+   * The suggestions that should be shown
+   */
   @Input() suggestions: any[] = [];
+
+  /**
+   * The time waited to detect if any other input will follow before requesting the suggestions
+   */
   @Input() debounceTime = 500;
+
+  /**
+   * Placeholder attribute for the input field
+   */
   @Input() placeholder = '';
+
+  /**
+   * Action attribute for the form
+   */
   @Input() action;
+
+  /**
+   * Name attribute for the input field
+   */
   @Input() name;
+
+  /**
+   * Value of the input field
+   */
   @Input() ngModel;
+
+  /**
+   * Output for when the input field's value changes
+   */
   @Output() ngModelChange = new EventEmitter();
+
+  /**
+   * Output for when the form is submitted
+   */
   @Output() submitSuggestion = new EventEmitter();
+
+  /**
+   * Output for when a suggestion is clicked
+   */
   @Output() clickSuggestion = new EventEmitter();
+
+  /**
+   * Output for when new suggestions should be requested
+   */
   @Output() findSuggestions = new EventEmitter();
+
+  /**
+   * Emits true when the list of suggestions should be shown
+   */
   show = new BehaviorSubject<boolean>(false);
+
+  /**
+   * Index of the currently selected suggestion
+   */
   selectedIndex = -1;
+
+  /**
+   * Reference to the input field component
+   */
   @ViewChild('inputField') queryInput: ElementRef;
+  /**
+   * Reference to the suggestion components
+   */
   @ViewChildren('suggestion') resultViews: QueryList<ElementRef>;
 
+  /**
+   * When any of the inputs change, check if we should still show the suggestions
+   */
   ngOnChanges(changes: SimpleChanges) {
     if (hasValue(changes.suggestions)) {
       this.show.next(isNotEmpty(changes.suggestions.currentValue));
     }
   }
 
+  /**
+   * Move the focus on one of the suggestions up to the previous suggestion
+   * When no suggestion is currently in focus OR the first suggestion is in focus: shift to the last suggestion
+   */
   shiftFocusUp(event: KeyboardEvent) {
     event.preventDefault();
     if (this.selectedIndex > 0) {
@@ -56,6 +113,10 @@ export class InputSuggestionsComponent {
     this.changeFocus();
   }
 
+  /**
+   * Move the focus on one of the suggestions up to the next suggestion
+   * When no suggestion is currently in focus OR the last suggestion is in focus: shift to the first suggestion
+   */
   shiftFocusDown(event: KeyboardEvent) {
     event.preventDefault();
     if (this.selectedIndex >= 0) {
@@ -67,26 +128,42 @@ export class InputSuggestionsComponent {
     this.changeFocus();
   }
 
+  /**
+   * Perform the change of focus to the current selectedIndex
+   */
   changeFocus() {
     if (this.resultViews.length > 0) {
       this.resultViews.toArray()[this.selectedIndex].nativeElement.focus();
     }
   }
 
+  /**
+   * When any key is pressed (except for the Enter button) the query input should move to the input field
+   * @param {KeyboardEvent} event The keyboard event
+   */
   onKeydown(event: KeyboardEvent) {
     if (event.key !== 'Enter') {
       this.queryInput.nativeElement.focus();
     }
   }
 
+  /**
+   * Changes the show variable so the suggestion dropdown closes
+   */
   close() {
     this.show.next(false);
   }
 
+  /**
+   * For usage of the isNotEmpty function in the template
+   */
   isNotEmpty(data) {
     return isNotEmpty(data);
   }
 
+  /**
+   * Make sure that if a suggestion is clicked, the suggestions dropdown closes and the focus moves to the input field
+   */
   onClickSuggestion(data) {
     this.clickSuggestion.emit(data);
     this.close();