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

[RaymondLuong3]

When a user wants to edit the project in a project select, they have to manually highlight and delete the currently selected project. This change updates the project select so that when a user clicks in the input, the currently selected project text is highlighted and the user can begin typing to clear the previously selected project.

---

This change is 

[codecov]

Codecov Report

Attention: Patch coverage is 85.71429% with 1 line in your changes missing coverage. Please review.

Project coverage is 81.99%. Comparing base (6d2e621) to head (8cfbc99).

Files with missing lines	Patch %	Lines
...src/app/project-select/project-select.component.ts	85.71%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3261   +/-   ##
=======================================
  Coverage   81.99%   81.99%           
=======================================
  Files         605      605           
  Lines       35111    35117    +6     
  Branches     5692     5711   +19     
=======================================
+ Hits        28789    28794    +5     
+ Misses       5490     5479   -11     
- Partials      832      844   +12     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pmachapman]

Reviewed 2 of 2 files at r1, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @RaymondLuong3)

---

src/SIL.XForge.Scripture/ClientApp/src/app/project-select/project-select.component.ts line 203 at r1 (raw file):

    // Select all the text so the user can begin typing to replace it
    input.select();
  }

This change makes it difficult to click inside (particular on mobile) the text element and edit it.

If you changed it to something like:

  private inputSelected = false;

  inputBlurred(): void {
    this.inputSelected = false;
  }

  inputClicked(event: MouseEvent): void {
    this.autocompleteTrigger.openPanel();
    const input = event.target as HTMLInputElement;
    // Select all the text on first click so the user can begin typing to replace it
    if (!this.inputSelected) {
      input.select();
      this.inputSelected = true;
    }
  }

and added (blur)="inputBlurred()" to the<input>, then only the first click would select all of the text, and subsequent clikcs would allow the user to click in the select or edit portions of the input value.

Code quote:

  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();
  }

[pmachapman]

Reviewed 2 of 2 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RaymondLuong3)

[Nateowami]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @RaymondLuong3)

---

src/SIL.XForge.Scripture/ClientApp/src/app/project-select/project-select.component.ts line 204 at r2 (raw file):

  }

  inputClicked(event: MouseEvent): void {

Maybe we should instead be listening to the focus event?