Use autocompletion for partner search

src/app/components/player-registrations/player-registrations.component.html

@@ -23,8 +23,8 @@
                              [matAutocomplete]="auto"
                              [disabled]="!tournamentRegistration.editable || !eventRegistration.registered"
                              [(ngModel)]="eventRegistration.partner"
-                             (ngModelChange)="onPartnerSearch($event, eventRegistration)">
-<!--                             (focus)="onPartnerInputFocus(eventRegistration)">-->
+                             (input)="onPartnerSearch($any($event.target).value, eventRegistration)"
+                             [name]="'partner-' + eventRegistration.id">
                       <mat-autocomplete #auto="matAutocomplete"
                                         [displayWith]="displayPartnerName.bind(this)"
                                         (optionSelected)="onPartnerSelected($event, eventRegistration)">
@@ -36,19 +36,6 @@
                         }
                       </mat-autocomplete>
                     </mat-form-field>
-<!--
-                    <mat-form-field appearance="fill">
-                      <mat-label>Partner</mat-label>
-                      <mat-select [value]="eventRegistration.partner" [disabled]="!tournamentRegistration.editable || !eventRegistration.registered" [(ngModel)]="eventRegistration.partner">
-                        <mat-option>Geen</mat-option>
-                        @for (player of getRelevantPlayers(eventRegistration.type); track player.id) {
-                          <mat-option [value]="player.id">
-                            {{ player | fullName }}
-                          </mat-option>
-                        }
-                      </mat-select>
-                    </mat-form-field>
--->
                   }
                 </div>
                 <div class="col-6"></div>

src/app/components/player-registrations/player-registrations.component.ts

@@ -9,7 +9,6 @@ import {RegistrationService} from "../../service/registration.service";
 import {MatCheckbox, MatCheckboxChange} from "@angular/material/checkbox";
 import {EventRegistration, TournamentRegistration} from "../../model/tournamentRegistration";
 import {MatOption} from "@angular/material/core";
-import {MatSelect} from "@angular/material/select";
 import {MatIcon} from "@angular/material/icon";
 import {MatAnchor, MatButton} from "@angular/material/button";
 import {MatSnackBar} from "@angular/material/snack-bar";
@@ -17,7 +16,6 @@ import {FullNamePipe} from "../../pipes/fullname-pipe";
 import {HeaderService} from "../../service/header.service";
 import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocomplete";
 import {MatInput} from "@angular/material/input";
-import {NgForOf} from "@angular/common";
 
 @Component({
   selector: 'app-player-registrations',
@@ -58,6 +56,8 @@ export class PlayerRegistrationsComponent implements OnInit {
 
   waitingForBackend: boolean = false;
 
+  private partnerSearchTerms: Map<number, string> = new Map();
+
   constructor(
     private _snackBar: MatSnackBar,
     private playerService: PlayerService,
@@ -82,12 +82,12 @@ export class PlayerRegistrationsComponent implements OnInit {
     });
   }
 
-  private partnerSearchTerms: Map<number, string> = new Map();
-
-// Add methods
-  onPartnerSearch(searchTerm: string, eventRegistration: EventRegistration) {
+  onPartnerSearch(searchTerm: any, eventRegistration: EventRegistration) {
+    // Only treat as search if it's a string (typed input)
+    if (typeof searchTerm === 'string') {
       this.partnerSearchTerms.set(eventRegistration.id, searchTerm?.toLowerCase() || '');
     }
+  }
 
   getFilteredPlayers(eventRegistration: EventRegistration): Player[] {
     const allRelevant = this.getRelevantPlayers(eventRegistration.type);
@@ -111,19 +111,10 @@ export class PlayerRegistrationsComponent implements OnInit {
 
   onPartnerSelected(event: any, eventRegistration: EventRegistration) {
     eventRegistration.partner = event.option.value;
+    // Clear the search term when a partner is selected
+    this.partnerSearchTerms.delete(eventRegistration.id);
   }
 
-  onPartnerInputFocus(eventRegistration: EventRegistration) {
-    // If there's already a partner selected, use their name as initial filter
-    if (eventRegistration.partner && this.allPlayers) {
-      const partner = this.allPlayers.find(p => p.id === eventRegistration.partner);
-      if (partner) {
-        const partnerName = this.fullNamePipe.transform(partner);
-        eventRegistration.partner = partnerName;
-        this.partnerSearchTerms.set(eventRegistration.id, partnerName.toLowerCase());
-      }
-    }
-  }
 
   saveRegistration(tournamentRegistration: TournamentRegistration, event: MouseEvent) {
     this.waitingForBackend = true;