From cd72ed2cec8220dc63981d0f48961d92b1ec46a7 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 24 Mar 2021 12:13:37 -0700
Subject: [PATCH 1/8] Support passing current term from tag search to create
 dialog

---
 .../common/input/tags/tags.component.html          |  7 ++++---
 .../components/common/input/tags/tags.component.ts | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 677b9f4d1..5500930bb 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -8,7 +8,8 @@
       [clearSearchOnAdd]="true"
       [hideSelected]="true"
       (change)="onChange(value)"
-      (blur)="onTouched()">
+      (search)="onSearch($event)"
+      (focus)="onFocus()">
 
       <ng-template ng-label-tmp let-item="item">
         <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
@@ -39,8 +40,8 @@
     <ng-container *ngFor="let tag of getSuggestions()">
       <a (click)="addTag(tag.id)" [routerLink]="">{{tag.name}}</a>&nbsp;
     </ng-container>
-    
-    
+
+
   </small>
 
 </div>
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index f77d0570d..336341bc3 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -56,6 +56,8 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   tags: PaperlessTag[]
 
+  private _lastSearchTerm: string
+
   getTag(id) {
     if (this.tags) {
       return this.tags.find(tag => tag.id == id)
@@ -77,6 +79,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   createTag() {
     var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
+    if (this._lastSearchTerm) modal.componentInstance.object = { name: this._lastSearchTerm }
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
@@ -84,6 +87,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
         this.onChange(this.value)
       })
     })
+    modal.result.then(() => {
+      this._lastSearchTerm = null
+    })
   }
 
   getSuggestions() {
@@ -99,4 +105,12 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     this.onChange(this.value)
   }
 
+  onFocus() {
+    this._lastSearchTerm = null
+  }
+
+  onSearch($event) {
+    this._lastSearchTerm = $event.term
+  }
+
 }

From 52bc1a62e1525204a6803e538ba7a850c7855a62 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 24 Mar 2021 12:21:13 -0700
Subject: [PATCH 2/8] Support passing current term from input-select search to
 create dialog e.g. for doc type / correspondent

---
 .../common/input/select/select.component.html   |  9 +++++----
 .../common/input/select/select.component.ts     | 17 ++++++++++++++++-
 .../document-detail.component.html              |  4 ++--
 .../document-detail.component.ts                |  6 ++++--
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 540429e89..59d0f9ca3 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -10,11 +10,12 @@
       bindLabel="name"
       bindValue="id"
       (change)="onChange(value)"
-      (blur)="onTouched()">
+      (search)="onSearch($event)"
+      (focus)="onFocus()">
     </ng-select>
 
     <div *ngIf="showPlusButton()" class="input-group-append">
-      <button class="btn btn-outline-secondary" type="button" (click)="createNew.emit()">
+      <button class="btn btn-outline-secondary" type="button" (click)="clickNew()">
         <svg class="buttonicon" fill="currentColor">
           <use xlink:href="assets/bootstrap-icons.svg#plus" />
         </svg>
@@ -27,7 +28,7 @@
     <ng-container *ngFor="let s of getSuggestions()">
       <a (click)="value = s.id; onChange(value)" [routerLink]="">{{s.name}}</a>&nbsp;
     </ng-container>
-    
-    
+
+
   </small>
 </div>
diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
index e02aaab72..6eaf7795f 100644
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/src-ui/src/app/components/common/input/select/select.component.ts
@@ -34,7 +34,9 @@ export class SelectComponent extends AbstractInputComponent<number> {
   suggestions: number[]
 
   @Output()
-  createNew = new EventEmitter()
+  createNew = new EventEmitter<string>()
+
+  private _lastSearchTerm: string
 
   showPlusButton(): boolean {
     return this.createNew.observers.length > 0
@@ -48,4 +50,17 @@ export class SelectComponent extends AbstractInputComponent<number> {
     }
   }
 
+  clickNew() {
+    this.createNew.next(this._lastSearchTerm)
+    this._lastSearchTerm = null
+  }
+
+  onFocus() {
+    this._lastSearchTerm = null
+  }
+
+  onSearch($event) {
+    this._lastSearchTerm = $event.term
+  }
+
 }
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index f9b87aee3..1286225fb 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -60,9 +60,9 @@
                         <app-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" formControlName='archive_serial_number'></app-input-number>
                         <app-input-date i18n-title title="Date created" formControlName="created" [error]="error?.created"></app-input-date>
                         <app-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true"
-                            (createNew)="createCorrespondent()" [suggestions]="suggestions?.correspondents"></app-input-select>
+                            (createNew)="createCorrespondent($event)" [suggestions]="suggestions?.correspondents"></app-input-select>
                         <app-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true"
-                            (createNew)="createDocumentType()" [suggestions]="suggestions?.document_types"></app-input-select>
+                            (createNew)="createDocumentType($event)" [suggestions]="suggestions?.document_types"></app-input-select>
                         <app-input-tags formControlName="tags" [suggestions]="suggestions?.tags"></app-input-tags>
 
                     </ng-template>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index af98a6f7f..7dd5dd80d 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -127,9 +127,10 @@ export class DocumentDetailComponent implements OnInit {
     this.documentForm.patchValue(doc)
   }
 
-  createDocumentType() {
+  createDocumentType(newName: string) {
     var modal = this.modalService.open(DocumentTypeEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
+    if (newName) modal.componentInstance.object = { name: newName }
     modal.componentInstance.success.subscribe(newDocumentType => {
       this.documentTypeService.listAll().subscribe(documentTypes => {
         this.documentTypes = documentTypes.results
@@ -138,9 +139,10 @@ export class DocumentDetailComponent implements OnInit {
     })
   }
 
-  createCorrespondent() {
+  createCorrespondent(newName: string) {
     var modal = this.modalService.open(CorrespondentEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
+    if (newName) modal.componentInstance.object = { name: newName }
     modal.componentInstance.success.subscribe(newCorrespondent => {
       this.correspondentService.listAll().subscribe(correspondents => {
         this.correspondents = correspondents.results

From 8ddb3e80b7674cf7906a21e7ed3cee1fc385ff2a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 24 Mar 2021 12:21:51 -0700
Subject: [PATCH 3/8] Add timeout for clearing last search term on select blur

---
 .../components/common/input/select/select.component.html    | 3 ++-
 .../app/components/common/input/select/select.component.ts  | 6 ++++++
 .../app/components/common/input/tags/tags.component.html    | 3 ++-
 .../src/app/components/common/input/tags/tags.component.ts  | 6 ++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 59d0f9ca3..a2834a1c9 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -11,7 +11,8 @@
       bindValue="id"
       (change)="onChange(value)"
       (search)="onSearch($event)"
-      (focus)="onFocus()">
+      (focus)="onFocus()"
+      (blur)="onBlur()">
     </ng-select>
 
     <div *ngIf="showPlusButton()" class="input-group-append">
diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
index 6eaf7795f..438925d32 100644
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/src-ui/src/app/components/common/input/select/select.component.ts
@@ -63,4 +63,10 @@ export class SelectComponent extends AbstractInputComponent<number> {
     this._lastSearchTerm = $event.term
   }
 
+  onBlur() {
+    setTimeout(() => {
+      this._lastSearchTerm = null
+    }, 3000);
+  }
+
 }
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 5500930bb..df6621fb0 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -9,7 +9,8 @@
       [hideSelected]="true"
       (change)="onChange(value)"
       (search)="onSearch($event)"
-      (focus)="onFocus()">
+      (focus)="onFocus()"
+      (blur)="onBlur()">
 
       <ng-template ng-label-tmp let-item="item">
         <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index 336341bc3..a1a803b61 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -113,4 +113,10 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     this._lastSearchTerm = $event.term
   }
 
+  onBlur() {
+    setTimeout(() => {
+      this._lastSearchTerm = null
+    }, 3000);
+  }
+
 }

From b6756595d98a10fbefdb67ffe0a2ccd3ee61cb8a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 24 Mar 2021 12:37:26 -0700
Subject: [PATCH 4/8] Clear last search term when clear button clicked

---
 .../components/common/input/select/select.component.html    | 3 ++-
 .../app/components/common/input/select/select.component.ts  | 6 +++---
 .../app/components/common/input/tags/tags.component.html    | 3 ++-
 .../src/app/components/common/input/tags/tags.component.ts  | 4 ++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index a2834a1c9..f9f05b6fa 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -11,7 +11,8 @@
       bindValue="id"
       (change)="onChange(value)"
       (search)="onSearch($event)"
-      (focus)="onFocus()"
+      (focus)="clearLastSearchTerm()"
+      (clear)="clearLastSearchTerm()"
       (blur)="onBlur()">
     </ng-select>
 
diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
index 438925d32..408b3a73a 100644
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/src-ui/src/app/components/common/input/select/select.component.ts
@@ -52,10 +52,10 @@ export class SelectComponent extends AbstractInputComponent<number> {
 
   clickNew() {
     this.createNew.next(this._lastSearchTerm)
-    this._lastSearchTerm = null
+    this.clearLastSearchTerm()
   }
 
-  onFocus() {
+  clearLastSearchTerm() {
     this._lastSearchTerm = null
   }
 
@@ -65,7 +65,7 @@ export class SelectComponent extends AbstractInputComponent<number> {
 
   onBlur() {
     setTimeout(() => {
-      this._lastSearchTerm = null
+      this.clearLastSearchTerm()
     }, 3000);
   }
 
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index df6621fb0..6eda2a44d 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -9,7 +9,8 @@
       [hideSelected]="true"
       (change)="onChange(value)"
       (search)="onSearch($event)"
-      (focus)="onFocus()"
+      (focus)="clearLastSearchTerm()"
+      (clear)="clearLastSearchTerm()"
       (blur)="onBlur()">
 
       <ng-template ng-label-tmp let-item="item">
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index a1a803b61..5c413a7c6 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -105,7 +105,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     this.onChange(this.value)
   }
 
-  onFocus() {
+  clearLastSearchTerm() {
     this._lastSearchTerm = null
   }
 
@@ -115,7 +115,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   onBlur() {
     setTimeout(() => {
-      this._lastSearchTerm = null
+      this.clearLastSearchTerm()
     }, 3000);
   }
 

From 9514e79bfbfd2852e550e2614897d76b331e9b21 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 24 Mar 2021 12:42:14 -0700
Subject: [PATCH 5/8] Not needed, clearing will be done by timeout

---
 src-ui/src/app/components/common/input/tags/tags.component.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index 5c413a7c6..44b2e282e 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -87,9 +87,6 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
         this.onChange(this.value)
       })
     })
-    modal.result.then(() => {
-      this._lastSearchTerm = null
-    })
   }
 
   getSuggestions() {

From 026c213ea46dd7c199dd829a6da9c40638114af4 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 3 Apr 2021 09:30:29 -0700
Subject: [PATCH 6/8] Refactor to use ng-select addTag function

---
 .../common/input/select/select.component.html | 31 ++++++++++---------
 .../common/input/select/select.component.ts   | 24 +++-----------
 .../common/input/tags/tags.component.html     | 17 +++-------
 .../common/input/tags/tags.component.ts       | 27 +++++-----------
 src-ui/src/styles.scss                        |  2 --
 5 files changed, 32 insertions(+), 69 deletions(-)

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index f9f05b6fa..b5fb6f2ed 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/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">
diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
index 408b3a73a..878254318 100644
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/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)
   }
 
 }
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index 6eda2a44d..b8d4f074e 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@@ -1,17 +1,16 @@
 <div class="form-group paperless-input-select paperless-input-tags">
   <label for="tags" i18n>Tags</label>
 
-  <div class="input-group flex-nowrap">
+  <div class="flex-nowrap">
     <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
       [multiple]="true"
       [closeOnSelect]="false"
       [clearSearchOnAdd]="true"
       [hideSelected]="true"
+      [addTag]="createTagRef"
+      addTagText="Add tag"
       (change)="onChange(value)"
-      (search)="onSearch($event)"
-      (focus)="clearLastSearchTerm()"
-      (clear)="clearLastSearchTerm()"
-      (blur)="onBlur()">
+      (blur)="onTouched()">
 
       <ng-template ng-label-tmp let-item="item">
         <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
@@ -27,14 +26,6 @@
         </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">
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index 44b2e282e..2ab6a02b5 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -17,8 +17,9 @@ import { TagService } from 'src/app/services/rest/tag.service';
 })
 export class TagsComponent implements OnInit, ControlValueAccessor {
 
-  constructor(private tagService: TagService, private modalService: NgbModal) { }
-
+  constructor(private tagService: TagService, private modalService: NgbModal) {
+    this.createTagRef = this.createTag.bind(this)
+  }
 
   onChange = (newValue: number[]) => {};
 
@@ -55,8 +56,8 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   value: number[]
 
   tags: PaperlessTag[]
-
-  private _lastSearchTerm: string
+  
+  public createTagRef: (name) => void
 
   getTag(id) {
     if (this.tags) {
@@ -76,10 +77,10 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  createTag() {
+  createTag(name: string = null) {
     var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
     modal.componentInstance.dialogMode = 'create'
-    if (this._lastSearchTerm) modal.componentInstance.object = { name: this._lastSearchTerm }
+    if (name) modal.componentInstance.object = { name: name }
     modal.componentInstance.success.subscribe(newTag => {
       this.tagService.listAll().subscribe(tags => {
         this.tags = tags.results
@@ -102,18 +103,4 @@ 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);
-  }
-
 }
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 34f575a05..8c48dcddc 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -77,8 +77,6 @@ body {
 
     .ng-select-container {
       height: 100%;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
 
       .ng-value-container .ng-input {
         top: 10px;

From ec4ec41552c6925d247602ac34d6196742be52a2 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 4 Apr 2021 17:05:27 -0700
Subject: [PATCH 7/8] Add back plus button which retains filter text

---
 .../common/input/select/select.component.html | 49 ++++++++++++-------
 .../common/input/select/select.component.ts   | 25 +++++++++-
 .../common/input/tags/tags.component.html     | 15 +++++-
 .../common/input/tags/tags.component.ts       | 19 ++++++-
 src-ui/src/styles.scss                        |  2 +
 5 files changed, 89 insertions(+), 21 deletions(-)

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index b5fb6f2ed..1bcdeda84 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/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;
diff --git a/src-ui/src/app/components/common/input/select/select.component.ts b/src-ui/src/app/components/common/input/select/select.component.ts
index 878254318..921e3606c 100644
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/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);
   }
 
 }
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/src-ui/src/app/components/common/input/tags/tags.component.html
index b8d4f074e..72c2cf1a5 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/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">
diff --git a/src-ui/src/app/components/common/input/tags/tags.component.ts b/src-ui/src/app/components/common/input/tags/tags.component.ts
index 2ab6a02b5..8db444ba3 100644
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@@ -56,9 +56,11 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   value: number[]
 
   tags: PaperlessTag[]
-  
+
   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);
+  }
+
 }
diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 8c48dcddc..34f575a05 100644
--- a/src-ui/src/styles.scss
+++ b/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;

From 8eabf8c77ab91dd89abc22e710364a2f5dcabb02 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 4 Apr 2021 19:57:16 -0700
Subject: [PATCH 8/8] Refactor unneeded ngIf

---
 .../common/input/select/select.component.html | 20 ++-----------------
 1 file changed, 2 insertions(+), 18 deletions(-)

diff --git a/src-ui/src/app/components/common/input/select/select.component.html b/src-ui/src/app/components/common/input/select/select.component.html
index 1bcdeda84..0ae3009ea 100644
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@@ -1,13 +1,13 @@
 <div class="form-group paperless-input-select">
   <label [for]="inputId">{{title}}</label>
     <div [class.input-group]="allowCreateNew">
-      <ng-select *ngIf="allowCreateNew; else noAddTag" name="inputId" [(ngModel)]="value"
+      <ng-select name="inputId" [(ngModel)]="value"
         [disabled]="disabled"
         [style.color]="textColor"
         [style.background]="backgroundColor"
         [clearable]="allowNull"
         [items]="items"
-        [addTag]="addItemRef"
+        [addTag]="allowCreateNew && addItemRef"
         bindLabel="name"
         bindValue="id"
         (change)="onChange(value)"
@@ -16,22 +16,6 @@
         (clear)="clearLastSearchTerm()"
         (blur)="onBlur()">
       </ng-select>
-      <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">