Allow enter key to toggle items in filtered list if single item remains

src-ui/src/app/app.module.ts

@@ -112,7 +112,8 @@ import { FilterPipe } from './pipes/filter.pipe';
       provide: HTTP_INTERCEPTORS,
       useClass: CsrfInterceptor,
       multi: true
-    }
+    },
+    FilterPipe
   ],
   bootstrap: [AppComponent]
 })

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html

@@ -2,9 +2,9 @@
   <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button>
   <div class="dropdown-menu quick-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
-      <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="listFilterText" placeholder="Filter {{title}}" #listFilterTextInput>
-      <ng-container *ngIf="(items | filter: listFilterText).length > 0">
-        <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: listFilterText; let i = index" (click)="toggleItem(item)">
+      <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
+      <ng-container *ngIf="(items | filter: filterText).length > 0">
+        <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: filterText; let i = index" (click)="toggleItem(item)">
           <div class="selected-icon mr-1">
             <svg *ngIf="itemsActive.includes(item)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>

src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
 import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
 import { ObjectWithId } from 'src/app/data/object-with-id';
+import { FilterPipe } from  'src/app/pipes/filter.pipe';
 
 @Component({
   selector: 'app-filter-dropdown',
@@ -9,7 +10,7 @@ import { ObjectWithId } from 'src/app/data/object-with-id';
 })
 export class FilterDropdownComponent implements OnInit {
 
-  constructor() { }
+  constructor(private filterPipe: FilterPipe) { }
 
   @Input()
   filterRuleTypeID: number
@@ -22,7 +23,7 @@ export class FilterDropdownComponent implements OnInit {
   items: ObjectWithId[] = []
   itemsActive: ObjectWithId[] = []
   title: string
-  listFilterText: string
+  filterText: string
   display: string
 
   ngOnInit(): void {
@@ -44,4 +45,9 @@ export class FilterDropdownComponent implements OnInit {
       this.filterText = ''
     }
   }
+
+  listFilterEnter(): void {
+    let filtered = this.filterPipe.transform(this.items, this.filterText)
+    if (filtered.length == 1) this.toggleItem(filtered.shift())
+  }
 }

src-ui/src/app/components/filter-editor/filter-editor.component.ts

@@ -42,9 +42,6 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
   documentTypes: PaperlessDocumentType[] = []
 
   filterText: string
-  filterTagsText: string
-  filterCorrespondentsText: string
-  filterDocumentTypesText: string
 
   ngOnInit(): void {
     this.updateTextFilterInput()