SF-3276 Highlight text in project select when user clicks the input

Author: RaymondLuong3

src/SIL.XForge.Scripture/ClientApp/src/app/project-select/project-select.component.html

@@ -6,7 +6,7 @@
       [placeholder]="placeholder"
       [formControl]="paratextIdControl"
       [matAutocomplete]="auto"
-      (click)="inputClicked()"
+      (click)="inputClicked($event)"
       [errorStateMatcher]="matcher"
     />
     <mat-error id="invalidSelection">{{ invalidMessage }}</mat-error>

src/SIL.XForge.Scripture/ClientApp/src/app/project-select/project-select.component.ts

@@ -195,9 +195,11 @@ export class ProjectSelectComponent implements ControlValueAccessor, OnDestroy {
       }
     });
   }
-
-  inputClicked(): void {
+  inputClicked(event: MouseEvent): void {
     this.autocompleteTrigger.openPanel();
+    const input = event.target as HTMLInputElement;
+    // Select all the text so the user can begin typing to replace it
+    input.select();
   }
 
   nullableLength(project: SelectableProject[] | null): number {