Refactor to use ng-select addTag function

src-ui/src/app/components/common/input/select/select.component.html

@@ -1,28 +1,29 @@
 <div class="form-group paperless-input-select">
   <label [for]="inputId">{{title}}</label>
-  <div [class.input-group]="showPlusButton()">
-    <ng-select name="inputId" [(ngModel)]="value"
+  <div>
+    <ng-select *ngIf="allowCreateNew; else noAddTag" name="inputId" [(ngModel)]="value"
       [disabled]="disabled"
       [style.color]="textColor"
       [style.background]="backgroundColor"
       [clearable]="allowNull"
       [items]="items"
+      [addTag]="addItemRef"
       bindLabel="name"
       bindValue="id"
-      (change)="onChange(value)"
-      (search)="onSearch($event)"
-      (focus)="clearLastSearchTerm()"
-      (clear)="clearLastSearchTerm()"
-      (blur)="onBlur()">
+      (blur)="onTouched()">
     </ng-select>
-
-    <div *ngIf="showPlusButton()" class="input-group-append">
-      <button class="btn btn-outline-secondary" type="button" (click)="clickNew()">
-        <svg class="buttonicon" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#plus" />
-        </svg>
-      </button>
-    </div>
+    <ng-template #noAddTag>
+      <ng-select name="inputId" [(ngModel)]="value"
+        [disabled]="disabled"
+        [style.color]="textColor"
+        [style.background]="backgroundColor"
+        [clearable]="allowNull"
+        [items]="items"
+        bindLabel="name"
+        bindValue="id"
+        (blur)="onTouched()">
+      </ng-select>
+    </ng-template>
   </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">

src-ui/src/app/components/common/input/select/select.component.ts

@@ -16,6 +16,7 @@ export class SelectComponent extends AbstractInputComponent<number> {
 
   constructor() {
     super()
+    this.addItemRef = this.addItem.bind(this)
    }
 
   @Input()
@@ -36,9 +37,9 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Output()
   createNew = new EventEmitter<string>()
 
-  private _lastSearchTerm: string
+  public addItemRef: (name) => void
 
-  showPlusButton(): boolean {
+  get allowCreateNew(): boolean {
     return this.createNew.observers.length > 0
   }
 
@@ -50,23 +51,8 @@ export class SelectComponent extends AbstractInputComponent<number> {
     }
   }
 
-  clickNew() {
-    this.createNew.next(this._lastSearchTerm)
-    this.clearLastSearchTerm()
-  }
-
-  clearLastSearchTerm() {
-    this._lastSearchTerm = null
-  }
-
-  onSearch($event) {
-    this._lastSearchTerm = $event.term
-  }
-
-  onBlur() {
-    setTimeout(() => {
-      this.clearLastSearchTerm()
-    }, 3000);
+  addItem(name: string) {
+    this.createNew.next(name)
   }
 
 }