Add back plus button which retains filter text

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

@@ -1,30 +1,45 @@
 <div class="form-group paperless-input-select">
   <label [for]="inputId">{{title}}</label>
-  <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"
-      (blur)="onTouched()">
-    </ng-select>
-    <ng-template #noAddTag>
-      <ng-select name="inputId" [(ngModel)]="value"
+    <div [class.input-group]="allowCreateNew">
+      <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"
-        (blur)="onTouched()">
+        (change)="onChange(value)"
+        (search)="onSearch($event)"
+        (focus)="clearLastSearchTerm()"
+        (clear)="clearLastSearchTerm()"
+        (blur)="onBlur()">
       </ng-select>
-    </ng-template>
-  </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"
+          (change)="onChange(value)"
+          (search)="onSearch($event)"
+          (focus)="clearLastSearchTerm()"
+          (clear)="clearLastSearchTerm()"
+          (blur)="onBlur()">
+        </ng-select>
+      </ng-template>
+      <div *ngIf="allowCreateNew" class="input-group-append">
+        <button class="btn btn-outline-secondary" type="button" (click)="addItem()">
+          <svg class="buttonicon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#plus" />
+          </svg>
+        </button>
+      </div>
+    </div>
   <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">
     <span i18n>Suggestions:</span>&nbsp;

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

@@ -39,6 +39,8 @@ export class SelectComponent extends AbstractInputComponent<number> {
 
   public addItemRef: (name) => void
 
+  private _lastSearchTerm: string
+
   get allowCreateNew(): boolean {
     return this.createNew.observers.length > 0
   }
@@ -52,7 +54,28 @@ export class SelectComponent extends AbstractInputComponent<number> {
   }
 
   addItem(name: string) {
-    this.createNew.next(name)
+    if (name) this.createNew.next(name)
+    else this.createNew.next(this._lastSearchTerm)
+    this.clearLastSearchTerm()
+  }
+
+  clickNew() {
+    this.createNew.next(this._lastSearchTerm)
+    this.clearLastSearchTerm()
+  }
+
+  clearLastSearchTerm() {
+    this._lastSearchTerm = null
+  }
+
+  onSearch($event) {
+    this._lastSearchTerm = $event.term
+  }
+
+  onBlur() {
+    setTimeout(() => {
+      this.clearLastSearchTerm()
+    }, 3000);
   }
 
 }

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

@@ -1,7 +1,7 @@
 <div class="form-group paperless-input-select paperless-input-tags">
   <label for="tags" i18n>Tags</label>
 
-  <div class="flex-nowrap">
+  <div class="input-group flex-nowrap">
     <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
       [multiple]="true"
       [closeOnSelect]="false"
@@ -10,7 +10,10 @@
       [addTag]="createTagRef"
       addTagText="Add tag"
       (change)="onChange(value)"
-      (blur)="onTouched()">
+      (search)="onSearch($event)"
+      (focus)="clearLastSearchTerm()"
+      (clear)="clearLastSearchTerm()"
+      (blur)="onBlur()">
 
       <ng-template ng-label-tmp let-item="item">
         <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
@@ -26,6 +29,14 @@
         </div>
       </ng-template>
     </ng-select>
+
+    <div class="input-group-append">
+      <button class="btn btn-outline-secondary" type="button" (click)="createTag()">
+        <svg class="buttonicon" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#plus" />
+        </svg>
+      </button>
+    </div>
   </div>
   <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
   <small *ngIf="getSuggestions().length > 0">

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

@@ -59,6 +59,8 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   public createTagRef: (name) => void
 
+  private _lastSearchTerm: string
+
   getTag(id) {
     if (this.tags) {
       return this.tags.find(tag => tag.id == id)
@@ -81,6 +83,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
     if (name) modal.componentInstance.object = { name: name }
+    else if (this._lastSearchTerm) modal.componentInstance.object = { name: this._lastSearchTerm }
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
@@ -103,4 +106,18 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     this.onChange(this.value)
   }
 
+  clearLastSearchTerm() {
+    this._lastSearchTerm = null
+  }
+
+  onSearch($event) {
+    this._lastSearchTerm = $event.term
+  }
+
+  onBlur() {
+    setTimeout(() => {
+      this.clearLastSearchTerm()
+    }, 3000);
+  }
+
 }

src-ui/src/styles.scss

@@ -77,6 +77,8 @@ body {
 
     .ng-select-container {
       height: 100%;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
 
       .ng-value-container .ng-input {
         top: 10px;