Fix sort dialog namespace autocomplete

TG-14

Signed-off-by: Trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-dialog/sort-dialog.component.html

@@ -23,7 +23,8 @@
                 <mat-label>Namespace Name</mat-label>
                 <input #namespaceInput (change)="sortKey.namespaceName = namespaceInput.value"
                        [matAutocomplete]="namespaceAutocomplete"
-                       [formControl]="namespaceFormControl"
+                       (keyup)="this.updateAutocompleteSuggestions(namespaceInput.value)"
+                       (focus)="this.updateAutocompleteSuggestions(namespaceInput.value)"
                        [value]="sortKey.namespaceName ?? ''"
                        matInput
                        required>

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-dialog/sort-dialog.component.ts

@@ -15,7 +15,6 @@ export class SortDialogComponent {
 
     public sortEntries: SortKey[] = []
     public suggestedNamespaces: Namespace[] = [];
-    public namespaceFormControl = new FormControl();
 
     private namespaces: Namespace[] = [];
 
@@ -24,10 +23,6 @@ export class SortDialogComponent {
         this.sortEntries = data.sortEntries;
         tagService.namespaces.subscribe(
             namespaces => this.namespaces = namespaces);
-        this.namespaceFormControl.valueChanges.subscribe(
-            v => this.suggestedNamespaces = this.namespaces.sort(
-                (a, b) => this.compareSuggestionNamespaces(v, a.name, b.name))
-                .slice(0, 50))
     }
 
     addNewSortKey() {
@@ -53,6 +48,12 @@ export class SortDialogComponent {
             event.currentIndex);
     }
 
+    public updateAutocompleteSuggestions(value: string): void {
+        this.suggestedNamespaces = this.namespaces.sort(
+            (a, b) => this.compareSuggestionNamespaces(value, a.name, b.name))
+            .slice(0, 50)
+    }
+
     private compareSuggestionNamespaces(query: string, l: string, r: string): number {
         if (l.startsWith(query) && !r.startsWith(query)) {
             return -1;