From 7f209d2571180d0030e42ff519eac0837b99a0fa Mon Sep 17 00:00:00 2001
From: Andrew Cross <andrew-stuart-cross@outlook.com>
Date: Wed, 29 May 2024 13:16:37 +0100
Subject: [PATCH] Fixed mistake during refactor: filter autocomplete now
 working

---
 .../select-species/select-species.component.html    |  3 +--
 .../select-species/select-species.component.spec.ts |  1 +
 .../select-species/select-species.component.ts      | 13 ++-----------
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/app/_observation/select-species/select-species.component.html b/src/app/_observation/select-species/select-species.component.html
index 75c44ac..c55f2a2 100644
--- a/src/app/_observation/select-species/select-species.component.html
+++ b/src/app/_observation/select-species/select-species.component.html
@@ -1,4 +1,3 @@
-
 @if(_service.error()) {
 <div class="alert alert-danger" data-testid="error">
     <p data-testid="error-message">There was a problem retrieving the birds species list.  Try to reload the page.</p>
@@ -17,7 +16,7 @@
         <mat-spinner class="loading-spinner" matSuffix diameter="25"></mat-spinner>
         }
         <mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="displayFn">
-            @for (bird of _service.birds(); track bird) {
+            @for (bird of filteredBirds | async; track bird) {
             <mat-option [value]="bird">
                 {{bird.englishName}}
                 <!-- {{bird.englishName}} | <small>{{bird.birderStatus}}</small> -->
diff --git a/src/app/_observation/select-species/select-species.component.spec.ts b/src/app/_observation/select-species/select-species.component.spec.ts
index 70c90e5..2f6a5dc 100644
--- a/src/app/_observation/select-species/select-species.component.spec.ts
+++ b/src/app/_observation/select-species/select-species.component.spec.ts
@@ -173,6 +173,7 @@ describe('SelectSpeciesComponent', () => {
             const input = await loader.getHarness(MatAutocompleteHarness.with({ selector: '#bird' }));
             await input.focus();
             const options = await input.getOptions({ text: /Blue/ });
+            await input.focus();
 
             expect(options.length).toBe(1);
             expect(await options[0].getText()).toBe('Blue Tit');
diff --git a/src/app/_observation/select-species/select-species.component.ts b/src/app/_observation/select-species/select-species.component.ts
index fa1c9df..69abde0 100644
--- a/src/app/_observation/select-species/select-species.component.ts
+++ b/src/app/_observation/select-species/select-species.component.ts
@@ -14,17 +14,8 @@ import { MatIconModule } from '@angular/material/icon';
 @Component({
   selector: 'app-select-species',
   standalone: true,
-  imports: [
-    FormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatAutocompleteModule,
-    MatButtonModule,
-    MatIconModule,
-    MatProgressSpinnerModule,
-    ReactiveFormsModule,
-    CommonModule
-  ],
+  imports: [FormsModule, ReactiveFormsModule, CommonModule,
+    MatFormFieldModule, MatInputModule, MatAutocompleteModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
   templateUrl: './select-species.component.html',
   styleUrl: './select-species.component.scss'
 })