From 32dd547082e1be13784f31120e3bd9a258b4d54a Mon Sep 17 00:00:00 2001
From: Yang Li <u7764210@anu.edu.au>
Date: Thu, 10 Oct 2024 23:36:28 +1100
Subject: [PATCH 1/9] Add <input /> aside <select />

---
 .../question-submission-form.component.html   | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.html b/src/web/app/components/question-submission-form/question-submission-form.component.html
index e2d079b9840..ea3e6c923d0 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.html
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.html
@@ -70,15 +70,18 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
                 <b>{{ getRecipientName(recipientSubmissionFormModel.recipientIdentifier) }} </b> <span>({{ model.recipientType | recipientTypeName:model.giverType }})</span>
               </div>
               <div class="row evaluee-select align-items-center" *ngIf="formMode === QuestionSubmissionFormMode.FLEXIBLE_RECIPIENT">
-                <select id="recipient-dropdown-qn-{{ model.questionNumber }}-idx-{{ i }}" class="form-control form-select fw-bold col" [ngModel]="recipientSubmissionFormModel.recipientIdentifier"
-                        (ngModelChange)="triggerRecipientSubmissionFormChange(i, 'recipientIdentifier', $event)"
-                        [disabled]="isFormsDisabled"
-                        [attr.aria-label]="'Select recipient dropdown question ' + model.questionNumber + ' index ' + i">
-                  <option value=""></option>
-                  <ng-container *ngFor="let recipient of model.recipientList">
-                    <option *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
-                  </ng-container>
-                </select>
+                <div class="row form-control select-editable col">
+                  <select id="recipient-dropdown-qn-{{ model.questionNumber }}-idx-{{ i }}" class="form-control form-select fw-bold" [ngModel]="recipientSubmissionFormModel.recipientIdentifier"
+                          (ngModelChange)="triggerRecipientIdentifierChange(i, $event)"
+                          [disabled]="isFormsDisabled"
+                          [attr.aria-label]="'Select recipient dropdown question ' + model.questionNumber + ' index ' + i">
+                    <option value=""></option>
+                    <ng-container *ngFor="let recipient of model.recipientList">
+                      <option *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
+                    </ng-container>
+                  </select>
+                  <input type="text" class="select-input fw-bold form-control" [ngModel]="searchName[i]"/>
+                </div>
                 <div class="col-auto text-start">
                   ({{ model.recipientType | recipientTypeName: model.giverType }})
                 </div>

From 23491f8e61ebaf3dd43340461d9681e42959caa3 Mon Sep 17 00:00:00 2001
From: Yang Li <u7764210@anu.edu.au>
Date: Thu, 10 Oct 2024 23:36:42 +1100
Subject: [PATCH 2/9] Add new style for select-input

---
 .../question-submission-form.component.scss   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.scss b/src/web/app/components/question-submission-form/question-submission-form.component.scss
index daf994c5bfa..f5c2a921510 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.scss
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.scss
@@ -54,3 +54,22 @@
 .collapse-caret {
   margin-right: 10px;
 }
+
+.select-editable {
+  position: relative;
+  border: 0;
+}
+
+.select-input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 80%;
+  border: 0;
+  background-color: transparent;
+  padding: .75rem 1.5rem;
+}
+
+.select-input:focus {
+  box-shadow: none;
+}

From 48f4cb172a7777de7f027c7f386bb582dbcd66c2 Mon Sep 17 00:00:00 2001
From: Yang Li <u7764210@anu.edu.au>
Date: Thu, 10 Oct 2024 23:37:26 +1100
Subject: [PATCH 3/9] Add field and method handling select-input value

---
 .../question-submission-form.component.ts                 | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.ts b/src/web/app/components/question-submission-form/question-submission-form.component.ts
index 59d83d25227..d47844c483a 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.ts
@@ -59,6 +59,8 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   isSaved: boolean = false;
   hasResponseChanged: boolean = false;
 
+  searchName: string[] = [];
+
   @Input()
   formMode: QuestionSubmissionFormMode = QuestionSubmissionFormMode.FIXED_RECIPIENT;
 
@@ -94,6 +96,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
       this.model.isTabExpandedForRecipients.set(recipient.recipientIdentifier, true);
     });
     this.hasResponseChanged = Array.from(this.model.hasResponseChangedForRecipients.values()).some((value) => value);
+    this.searchName = new Array(this.model.recipientSubmissionForms.length).fill("");
   }
 
   @Input()
@@ -361,6 +364,11 @@ export class QuestionSubmissionFormComponent implements DoCheck {
         recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier);
   }
 
+  triggerRecipientIdentifierChange(index: number, data: any): void {
+    this.searchName[index] = "";
+    this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data);
+  }
+
   /**
    * Triggers the change of the recipient submission form.
    */

From 4a8dfb4a74e56667fb4f6670a22e7a4049ee7ca7 Mon Sep 17 00:00:00 2001
From: Yang Li <u7764210@anu.edu.au>
Date: Fri, 11 Oct 2024 00:05:02 +1100
Subject: [PATCH 4/9] Correct value binding

---
 .../question-submission-form.component.html                 | 2 +-
 .../question-submission-form.component.scss                 | 2 +-
 .../question-submission-form.component.ts                   | 6 ++++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.html b/src/web/app/components/question-submission-form/question-submission-form.component.html
index ea3e6c923d0..78077b4c013 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.html
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.html
@@ -80,7 +80,7 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
                       <option *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
                     </ng-container>
                   </select>
-                  <input type="text" class="select-input fw-bold form-control" [ngModel]="searchName[i]"/>
+                  <input type="text" class="select-input fw-bold form-control" [(ngModel)]="searchName[i]" (ngModelChange)="triggerSelectInputChange(i)"/>
                 </div>
                 <div class="col-auto text-start">
                   ({{ model.recipientType | recipientTypeName: model.giverType }})
diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.scss b/src/web/app/components/question-submission-form/question-submission-form.component.scss
index f5c2a921510..86aa0dae45a 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.scss
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.scss
@@ -64,7 +64,7 @@
   position: absolute;
   left: 0;
   top: 0;
-  width: 80%;
+  width: 75%;
   border: 0;
   background-color: transparent;
   padding: .75rem 1.5rem;
diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.ts b/src/web/app/components/question-submission-form/question-submission-form.component.ts
index d47844c483a..64656c4282c 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.ts
@@ -367,6 +367,12 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   triggerRecipientIdentifierChange(index: number, data: any): void {
     this.searchName[index] = "";
     this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data);
+    console.log("Select triggered");
+  }
+
+  triggerSelectInputChange(index: number){
+    this.model.recipientSubmissionForms[index].recipientIdentifier = "";
+    console.log(index + " input triggered");
   }
 
   /**

From 7d7f70fee103987d16676500c5942b70893e4941 Mon Sep 17 00:00:00 2001
From: Yang Li <u7764210@anu.edu.au>
Date: Fri, 11 Oct 2024 10:51:01 +1100
Subject: [PATCH 5/9] Implement filter function

---
 .../question-submission-form.component.html   |  9 +++++--
 .../question-submission-form.component.scss   |  4 +++
 .../question-submission-form.component.ts     | 25 +++++++++++++++----
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.html b/src/web/app/components/question-submission-form/question-submission-form.component.html
index 78077b4c013..6b7be02eb3e 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.html
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.html
@@ -76,11 +76,16 @@ <h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ mode
                           [disabled]="isFormsDisabled"
                           [attr.aria-label]="'Select recipient dropdown question ' + model.questionNumber + ' index ' + i">
                     <option value=""></option>
-                    <ng-container *ngFor="let recipient of model.recipientList">
+                    <ng-container *ngFor="let recipient of filterRecipientsBySearchText(searchNameTexts[i],model.recipientList)">
                       <option *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
                     </ng-container>
                   </select>
-                  <input type="text" class="select-input fw-bold form-control" [(ngModel)]="searchName[i]" (ngModelChange)="triggerSelectInputChange(i)"/>
+                  <input type="text" class="select-input fw-bold form-control"
+                          [(ngModel)]="searchNameTexts[i]"
+                          (ngModelChange)="triggerSelectInputChange(i)"
+                          [disabled]="isFormsDisabled"
+                          [attr.aria-label]="'Recipient names filter ' + model.questionNumber + ' index ' + i"
+                          [ngClass]="filterRecipientsBySearchText(searchNameTexts[i],model.recipientList).length === 0 ? 'no-match' : ''" />
                 </div>
                 <div class="col-auto text-start">
                   ({{ model.recipientType | recipientTypeName: model.giverType }})
diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.scss b/src/web/app/components/question-submission-form/question-submission-form.component.scss
index 86aa0dae45a..f0832f545a9 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.scss
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.scss
@@ -73,3 +73,7 @@
 .select-input:focus {
   box-shadow: none;
 }
+
+.no-match {
+  color: var(--bs-danger)
+}
diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.ts b/src/web/app/components/question-submission-form/question-submission-form.component.ts
index 64656c4282c..c08d231fa12 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.ts
@@ -59,7 +59,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   isSaved: boolean = false;
   hasResponseChanged: boolean = false;
 
-  searchName: string[] = [];
+  searchNameTexts: string[] = [];
 
   @Input()
   formMode: QuestionSubmissionFormMode = QuestionSubmissionFormMode.FIXED_RECIPIENT;
@@ -96,7 +96,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
       this.model.isTabExpandedForRecipients.set(recipient.recipientIdentifier, true);
     });
     this.hasResponseChanged = Array.from(this.model.hasResponseChangedForRecipients.values()).some((value) => value);
-    this.searchName = new Array(this.model.recipientSubmissionForms.length).fill("");
+    this.searchNameTexts = new Array(this.model.recipientSubmissionForms.length).fill("");
   }
 
   @Input()
@@ -323,6 +323,17 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     this.updateSubmissionFormIndexes();
   }
 
+  filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[]): FeedbackResponseRecipient[]{
+    if (!searchText) return recipients;
+    let searchName = searchText.trim().toLowerCase();
+    if (searchName.length === 0) return recipients;
+    if (searchName.includes(" ")){
+      return recipients.filter(s=>s.recipientName.toLowerCase().includes(searchName));
+    }
+    
+    return recipients.filter(s=>s.recipientName.split(" ").some(s=>s.toLowerCase().startsWith(searchName)));
+  }
+
   private sortRecipientsBySectionTeam(): void {
     if (this.recipientLabelType === FeedbackRecipientLabelType.INCLUDE_SECTION) {
       this.model.recipientList.sort((firstRecipient, secondRecipient) => {
@@ -364,15 +375,19 @@ export class QuestionSubmissionFormComponent implements DoCheck {
         recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier);
   }
 
+  /**
+   * Triggers the changes of the recipient selection
+   */
   triggerRecipientIdentifierChange(index: number, data: any): void {
-    this.searchName[index] = "";
+    this.searchNameTexts[index] = "";
     this.triggerRecipientSubmissionFormChange(index, 'recipientIdentifier', data);
-    console.log("Select triggered");
   }
 
+  /**
+   * Triggers the changes of the recipient search text input
+   */
   triggerSelectInputChange(index: number){
     this.model.recipientSubmissionForms[index].recipientIdentifier = "";
-    console.log(index + " input triggered");
   }
 
   /**

From 859d6cb9751689c7135a03d23713a7f48bec3a6a Mon Sep 17 00:00:00 2001
From: Yang Li <u7764210@anu.edu.au>
Date: Fri, 11 Oct 2024 10:51:23 +1100
Subject: [PATCH 6/9] Add unit tests for filterRecipientsBySearchText

---
 ...question-submission-form.component.spec.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
index 1ff82d95cac..927f0fd3691 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
@@ -483,6 +483,25 @@ describe('QuestionSubmissionFormComponent', () => {
     expect(component.isRecipientSelected(feedbackResponseRecipient)).toBeFalsy();
   });
 
+  it('filterRecipientsBySearchText: should return correct filtered names', () => {
+    const doubleLucy = {recipientIdentifier: 'lucyLucy', recipientName: 'Lucy Lucy'};
+    const charlie = {recipientIdentifier: 'charlieBrown', recipientName: 'Charlie Brown'};
+    const lucy = {recipientIdentifier: 'lucyVanPelt', recipientName: 'Lucy van Pelt'};
+    const sally = {recipientIdentifier: 'sallyBrown', recipientName: 'Sally Brown'};
+    const snoopy = {recipientIdentifier: 'snoopy', recipientName: 'Snoopy'};
+    const linus = {recipientIdentifier: 'linusVanPelt', recipientName: 'Linus van Pelt'}
+
+    const recipients = [doubleLucy, charlie, lucy, sally, snoopy, linus];
+    expect(component.filterRecipientsBySearchText("", recipients)).toStrictEqual(recipients);
+    expect(component.filterRecipientsBySearchText("  ", recipients)).toStrictEqual(recipients);
+    expect(component.filterRecipientsBySearchText("Lucy", recipients)).toStrictEqual([doubleLucy, lucy]);
+    expect(component.filterRecipientsBySearchText("s", recipients)).toStrictEqual([sally, snoopy]);
+    expect(component.filterRecipientsBySearchText("Brow", recipients)).toStrictEqual([charlie, sally]);
+    expect(component.filterRecipientsBySearchText("van pel", recipients)).toStrictEqual([lucy, linus]);
+    expect(component.filterRecipientsBySearchText("van Pelt", recipients)).toStrictEqual([lucy, linus]);
+    expect(component.filterRecipientsBySearchText("cy", recipients)).toStrictEqual([]);
+  })
+
   it('triggerDeleteCommentEvent: should emit the correct index to deleteCommentEvent', () => {
     let emittedIndex: number | undefined;
     testEventEmission(component.deleteCommentEvent, (index) => { emittedIndex = index; });

From a231c6b698c6e3022101a15eee68cfdd84bd38d3 Mon Sep 17 00:00:00 2001
From: Yang Li <u7764210@anu.edu.au>
Date: Fri, 11 Oct 2024 11:06:54 +1100
Subject: [PATCH 7/9] Tidy up to pass lint

---
 ...question-submission-form.component.spec.ts | 30 +++++++++----------
 .../question-submission-form.component.ts     | 17 ++++++-----
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
index 927f0fd3691..67c39f8d5f1 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
@@ -484,23 +484,23 @@ describe('QuestionSubmissionFormComponent', () => {
   });
 
   it('filterRecipientsBySearchText: should return correct filtered names', () => {
-    const doubleLucy = {recipientIdentifier: 'lucyLucy', recipientName: 'Lucy Lucy'};
-    const charlie = {recipientIdentifier: 'charlieBrown', recipientName: 'Charlie Brown'};
-    const lucy = {recipientIdentifier: 'lucyVanPelt', recipientName: 'Lucy van Pelt'};
-    const sally = {recipientIdentifier: 'sallyBrown', recipientName: 'Sally Brown'};
-    const snoopy = {recipientIdentifier: 'snoopy', recipientName: 'Snoopy'};
-    const linus = {recipientIdentifier: 'linusVanPelt', recipientName: 'Linus van Pelt'}
+    const doubleLucy = { recipientIdentifier: 'lucyLucy', recipientName: 'Lucy Lucy' };
+    const charlie = { recipientIdentifier: 'charlieBrown', recipientName: 'Charlie Brown' };
+    const lucy = { recipientIdentifier: 'lucyVanPelt', recipientName: 'Lucy van Pelt' };
+    const sally = { recipientIdentifier: 'sallyBrown', recipientName: 'Sally Brown' };
+    const snoopy = { recipientIdentifier: 'snoopy', recipientName: 'Snoopy' };
+    const linus = { recipientIdentifier: 'linusVanPelt', recipientName: 'Linus van Pelt' };
 
     const recipients = [doubleLucy, charlie, lucy, sally, snoopy, linus];
-    expect(component.filterRecipientsBySearchText("", recipients)).toStrictEqual(recipients);
-    expect(component.filterRecipientsBySearchText("  ", recipients)).toStrictEqual(recipients);
-    expect(component.filterRecipientsBySearchText("Lucy", recipients)).toStrictEqual([doubleLucy, lucy]);
-    expect(component.filterRecipientsBySearchText("s", recipients)).toStrictEqual([sally, snoopy]);
-    expect(component.filterRecipientsBySearchText("Brow", recipients)).toStrictEqual([charlie, sally]);
-    expect(component.filterRecipientsBySearchText("van pel", recipients)).toStrictEqual([lucy, linus]);
-    expect(component.filterRecipientsBySearchText("van Pelt", recipients)).toStrictEqual([lucy, linus]);
-    expect(component.filterRecipientsBySearchText("cy", recipients)).toStrictEqual([]);
-  })
+    expect(component.filterRecipientsBySearchText('', recipients)).toStrictEqual(recipients);
+    expect(component.filterRecipientsBySearchText('  ', recipients)).toStrictEqual(recipients);
+    expect(component.filterRecipientsBySearchText('Lucy', recipients)).toStrictEqual([doubleLucy, lucy]);
+    expect(component.filterRecipientsBySearchText('s', recipients)).toStrictEqual([sally, snoopy]);
+    expect(component.filterRecipientsBySearchText('Brow', recipients)).toStrictEqual([charlie, sally]);
+    expect(component.filterRecipientsBySearchText('van pel', recipients)).toStrictEqual([lucy, linus]);
+    expect(component.filterRecipientsBySearchText('van Pelt', recipients)).toStrictEqual([lucy, linus]);
+    expect(component.filterRecipientsBySearchText('cy', recipients)).toStrictEqual([]);
+  });
 
   it('triggerDeleteCommentEvent: should emit the correct index to deleteCommentEvent', () => {
     let emittedIndex: number | undefined;
diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.ts b/src/web/app/components/question-submission-form/question-submission-form.component.ts
index c08d231fa12..dac0c416cec 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.ts
@@ -96,7 +96,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
       this.model.isTabExpandedForRecipients.set(recipient.recipientIdentifier, true);
     });
     this.hasResponseChanged = Array.from(this.model.hasResponseChangedForRecipients.values()).some((value) => value);
-    this.searchNameTexts = new Array(this.model.recipientSubmissionForms.length).fill("");
+    this.searchNameTexts = new Array(this.model.recipientSubmissionForms.length).fill('');
   }
 
   @Input()
@@ -323,15 +323,16 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     this.updateSubmissionFormIndexes();
   }
 
-  filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[]): FeedbackResponseRecipient[]{
+  filterRecipientsBySearchText(searchText: string, recipients: FeedbackResponseRecipient[])
+  : FeedbackResponseRecipient[] {
     if (!searchText) return recipients;
-    let searchName = searchText.trim().toLowerCase();
+    const searchName = searchText.trim().toLowerCase();
     if (searchName.length === 0) return recipients;
-    if (searchName.includes(" ")){
-      return recipients.filter(s=>s.recipientName.toLowerCase().includes(searchName));
+    if (searchName.includes(' ')) {
+      return recipients.filter((s) => s.recipientName.toLowerCase().includes(searchName));
     }
     
-    return recipients.filter(s=>s.recipientName.split(" ").some(s=>s.toLowerCase().startsWith(searchName)));
+    return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().startsWith(searchName)));
   }
 
   private sortRecipientsBySectionTeam(): void {
@@ -386,8 +387,8 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   /**
    * Triggers the changes of the recipient search text input
    */
-  triggerSelectInputChange(index: number){
-    this.model.recipientSubmissionForms[index].recipientIdentifier = "";
+  triggerSelectInputChange(index: number): void {
+    this.model.recipientSubmissionForms[index].recipientIdentifier = '';
   }
 
   /**

From 5e6e1ab06b57131bbc793f67af33307fc023d3e3 Mon Sep 17 00:00:00 2001
From: u7199817 <u7199817@anu.edu.au>
Date: Sat, 12 Oct 2024 14:36:22 +1100
Subject: [PATCH 8/9] update filter function to allow search for all possible
 substrings

---
 .../question-submission-form.component.ts                       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.ts b/src/web/app/components/question-submission-form/question-submission-form.component.ts
index dac0c416cec..55ff46fb737 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.ts
@@ -332,7 +332,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
       return recipients.filter((s) => s.recipientName.toLowerCase().includes(searchName));
     }
     
-    return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().startsWith(searchName)));
+    return recipients.filter((r) => r.recipientName.split(' ').some((s) => s.toLowerCase().includes(searchName)));
   }
 
   private sortRecipientsBySectionTeam(): void {

From 11ebfab0a6f604f2ea765be904f8dac5d6290938 Mon Sep 17 00:00:00 2001
From: u7199817 <u7199817@anu.edu.au>
Date: Sat, 12 Oct 2024 14:37:09 +1100
Subject: [PATCH 9/9] update test cases

---
 .../question-submission-form.component.spec.ts        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
index 67c39f8d5f1..b0cb8c24e22 100644
--- a/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
+++ b/src/web/app/components/question-submission-form/question-submission-form.component.spec.ts
@@ -490,16 +490,21 @@ describe('QuestionSubmissionFormComponent', () => {
     const sally = { recipientIdentifier: 'sallyBrown', recipientName: 'Sally Brown' };
     const snoopy = { recipientIdentifier: 'snoopy', recipientName: 'Snoopy' };
     const linus = { recipientIdentifier: 'linusVanPelt', recipientName: 'Linus van Pelt' };
+    const benny = { recipientIdentifier: 'bennyCharles', recipientName: 'Benny Charles' };
+    const charlieDavis = { recipientIdentifier: 'charlieDavis', recipientName: 'Charlie Davis' };
+    const francis = { recipientIdentifier: 'francisGabriel', recipientName: 'Francis Gabriel' };
 
-    const recipients = [doubleLucy, charlie, lucy, sally, snoopy, linus];
+    const recipients = [doubleLucy, charlie, lucy, sally, snoopy, linus, benny, charlieDavis, francis];
     expect(component.filterRecipientsBySearchText('', recipients)).toStrictEqual(recipients);
     expect(component.filterRecipientsBySearchText('  ', recipients)).toStrictEqual(recipients);
     expect(component.filterRecipientsBySearchText('Lucy', recipients)).toStrictEqual([doubleLucy, lucy]);
-    expect(component.filterRecipientsBySearchText('s', recipients)).toStrictEqual([sally, snoopy]);
+    expect(component.filterRecipientsBySearchText('s', recipients)).toStrictEqual([sally, snoopy, linus, benny, charlieDavis, francis]);
     expect(component.filterRecipientsBySearchText('Brow', recipients)).toStrictEqual([charlie, sally]);
     expect(component.filterRecipientsBySearchText('van pel', recipients)).toStrictEqual([lucy, linus]);
     expect(component.filterRecipientsBySearchText('van Pelt', recipients)).toStrictEqual([lucy, linus]);
-    expect(component.filterRecipientsBySearchText('cy', recipients)).toStrictEqual([]);
+    expect(component.filterRecipientsBySearchText('cy', recipients)).toStrictEqual([doubleLucy, lucy]);
+    expect(component.filterRecipientsBySearchText('char', recipients)).toStrictEqual([charlie, benny, charlieDavis]);
+    expect(component.filterRecipientsBySearchText('is', recipients)).toStrictEqual([charlieDavis, francis]);
   });
 
   it('triggerDeleteCommentEvent: should emit the correct index to deleteCommentEvent', () => {