[#13054] Make substrings of the name in dropdown selections of recipient to be searchable

src/web/app/components/question-submission-form/question-submission-form.component.html

@@ -70,12 +70,14 @@ <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">
+                <input type="text" class="form-control mb-3" placeholder="Search recipients..."
+                        [(ngModel)]="searchTerm" (ngModelChange)="sortRecipientsByName()" />
                 <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">
+                  <ng-container *ngFor="let recipient of filteredRecipients">
                     <option *ngIf="!isRecipientSelected(recipient) || recipientSubmissionFormModel.recipientIdentifier === recipient.recipientIdentifier" [ngValue]="recipient.recipientIdentifier">{{ getSelectionOptionLabel(recipient) }}</option>
                   </ng-container>
                 </select>

src/web/app/components/question-submission-form/question-submission-form.component.ts

@@ -58,6 +58,7 @@ export class QuestionSubmissionFormComponent implements DoCheck {
   isMCQDropDownEnabled: boolean = false;
   isSaved: boolean = false;
   hasResponseChanged: boolean = false;
+  searchTerm: string = '';
 
   @Input()
   formMode: QuestionSubmissionFormMode = QuestionSubmissionFormMode.FIXED_RECIPIENT;
@@ -320,6 +321,12 @@ export class QuestionSubmissionFormComponent implements DoCheck {
     this.updateSubmissionFormIndexes();
   }
 
+  get filteredRecipients(): FeedbackResponseRecipient[] {
+    return this.model.recipientList.filter((recipient) =>
+      recipient.recipientName.toLowerCase().includes(this.searchTerm.toLowerCase()),
+    );
+  }
+
   private sortRecipientsBySectionTeam(): void {
     if (this.recipientLabelType === FeedbackRecipientLabelType.INCLUDE_SECTION) {
       this.model.recipientList.sort((firstRecipient, secondRecipient) => {