AW-3836 fixed tags component

projects/common/src/fm/components/tag-input/tag-input.component.html

@@ -1,3 +1,11 @@
 <div class="tags">
-  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input type="text" #taginput (blur)="handleAddTag($event)" (keyup)="handleCheckAddTag($event)" [(ngModel)]="tag" [ngbTypeahead]="findTag" (selectItem)="handleSelect($event)" placeholder="New tag"/>
+  <span class="tag rounded bg-primary text-white" *ngFor="let tag of tags;"><span>{{tag}}</span> <i
+    (click)="handleDeleteTag(tag)" class="fal fa-times" aria-hidden="true"></i></span><input
+  type="text" #tagInputElement
+  (blur)="handleBlur($event, false)"
+  (keyup)="handleKeyUp($event)"
+  [(ngModel)]="tag"
+  [ngbTypeahead]="findTag"
+  (selectItem)="handleSelect($event)"
+  placeholder="New tag"/>
 </div>

projects/common/src/fm/components/tag-input/tag-input.component.ts

@@ -1,8 +1,9 @@
-import { Component, Input, forwardRef,ElementRef,ViewChild } from '@angular/core';
+import {Component, ElementRef, forwardRef, Input, ViewChild} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR,NgModel } from '@angular/forms';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {Observable, of} from 'rxjs';
-import { tap,catchError,debounceTime,distinctUntilChanged,switchMap } from 'rxjs/operators'
+import {catchError, debounceTime, distinctUntilChanged, switchMap, tap} from 'rxjs/operators';
-import { TypeaheadService } from '../../services/typeahead.service';
+import {TypeaheadService} from '@farmmaps/common';
+import {NgbTypeahead} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'fm-tag-input',
@@ -18,8 +19,10 @@ import { TypeaheadService } from '../../services/typeahead.service';
 })
 
 export class TagInputComponent implements ControlValueAccessor {
-  @Input() tags: string[]
+  @Input() tags: string[] = [];
-  @ViewChild('taginput', { static: true }) tagInputElement: ElementRef;
+  @ViewChild('tagInputElement', {static: true}) tagInputElement: ElementRef;
+  @ViewChild(NgbTypeahead, {static: true}) typeahead: NgbTypeahead;
+
   public tag: string;
   searching = false;
   searchFailed = false;
@@ -28,39 +31,52 @@ export class TagInputComponent implements ControlValueAccessor  {
   }
 
   tagExists(tag) {
-    if (tag.length == 0) return true;
+    if (tag.length === 0) {
-    for (let t of this.tags) {
+      return true;
-      if (t.toLowerCase() == tag.toLowerCase()) return true;
+    }
+    for (const t of this.tags) {
+      if (t.toLowerCase() === tag.toLowerCase()) {
+        return true;
+      }
     }
     return false;
   }
 
+  addTag(tag, keepFocus = true) {
+    if (!this.tagExists(tag)) {
+      this.tags.push(tag);
+      this.propagateChange(this.tags);
+    }
+    this.tag = '';
+
+    if (keepFocus) {
+      this.tagInputElement.nativeElement.focus();
+    }
+  }
+
   handleDeleteTag(tag) {
-    let tags = [];
+    const tags = [];
-    for (let t of this.tags) {
+    for (const t of this.tags) {
-      if (t != tag) tags.push(t);
+      if (t !== tag) {
+        tags.push(t);
+      }
     }
     this.tags = tags;
     this.propagateChange(tags);
   }
 
-  handleAddTag(event) {
+  handleBlur(event, keepFocus = true) {
-    if (!this.tagExists(this.tag)) {
+    if (!this.typeahead.isPopupOpen()) {
-      this.tags.push(this.tag);
+      this.addTag(this.tag, keepFocus);
-      this.propagateChange(this.tags);
+    } else {
+      this.tag = '';
     }
-    this.tag = "";
-    this.tagInputElement.nativeElement.focus();
   }
 
-  handleCheckAddTag(event: KeyboardEvent) {
+  handleKeyUp(event: KeyboardEvent) {
-    if (event.keyCode == 188) {
+    if (event.keyCode === 188) {
-      let tag = this.tag.substr(0, this.tag.length - 1); // strip ,
+      const tag = this.tag.substr(0, this.tag.length - 1); // strip ,
-      if (!this.tagExists(tag)) {
+      this.addTag(tag);
-        this.tags.push(tag);
-        this.propagateChange(this.tags);
-      }
-      this.tag = "";
     }
   }
 
@@ -70,10 +86,11 @@ export class TagInputComponent implements ControlValueAccessor  {
       this.propagateChange(this.tags);
     }
     event.preventDefault();
-    this.tag = "";
+    this.tag = '';
   }
 
-  propagateChange = (_: any) => { };
+  propagateChange = (_: any) => {
+  }
 
   registerOnChange(fn) {
     this.propagateChange = fn;
@@ -81,8 +98,8 @@ export class TagInputComponent implements ControlValueAccessor  {
 
   findTag = (text$: Observable<string>) =>
     text$.pipe(
-        debounceTime(200),
       distinctUntilChanged(),
+      debounceTime(200),
       tap(() => this.searching = true),
       switchMap(term => term.length < 1 ? of([]) :
         this.typeaheadService.getTagTypeaheadItems(term).pipe(
@@ -93,12 +110,13 @@ export class TagInputComponent implements ControlValueAccessor  {
           }))
       ),
       tap(() => this.searching = false)
-  );
+    )
 
   writeValue(value: any) {
     this.tags = value;
-    this.tag = "";
+    this.tag = '';
   }
 
-  registerOnTouched() { }
+  registerOnTouched() {
+  }
 }