From dbed4ba09ad613eb48c8ca3368747c5c5c4652b9 Mon Sep 17 00:00:00 2001
From: Ben Stein <bsstein@sei.cmu.edu>
Date: Fri, 3 Jan 2025 17:18:27 -0500
Subject: [PATCH] Fix selection bugs with cert template picker

---
 .../certificate-template-picker.component.html               | 4 ++--
 .../certificate-template-picker.component.ts                 | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html
index d4180c0a..541501fe 100644
--- a/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.html
@@ -5,8 +5,8 @@
         </label>
 
         <div class="input-group">
-            <select id="feedbackTemplate" class="form-control" [(ngModel)]="selectedTemplate"
-                (change)="handleTemplateSelect()">
+            <select id="feedbackTemplate" class="form-control" [ngModel]="selectedTemplate"
+                (ngModelChange)="handleTemplateSelect()">
                 <option [ngValue]="undefined">{{ defaultOptionText }}</option>
                 <option *ngFor="let template of templates" [ngValue]="template">
                     {{ template.name }}
diff --git a/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts
index bb9750ba..6f5c91e0 100644
--- a/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts
+++ b/projects/gameboard-ui/src/app/certificates/components/certificate-template-picker/certificate-template-picker.component.ts
@@ -46,8 +46,11 @@ export class CertificateTemplatePickerComponent implements OnInit, OnChanges {
   }
 
   async ngOnChanges(changes: SimpleChanges): Promise<void> {
-    if (changes.selectedTemplateId?.currentValue && changes.selectedTemplateId.currentValue !== this.selectedTemplate?.id) {
+    if (changes.selectedTemplateId.isFirstChange()) {
       await this.load();
+    }
+
+    if (changes.selectedTemplateId?.currentValue && changes.selectedTemplateId.currentValue !== this.selectedTemplate?.id) {
       this.selectedTemplate = this.templates.find(t => t.id === changes.selectedTemplateId.currentValue);
     }
   }