Clear subject select on focus.

src/app/degree-planner/course-search/course-search.component.html

@@ -27,6 +27,7 @@
       aria-label="Subject"
       matInput
       #subjectInput
+      (focus)="clearSubject()"
       formControlName="subject"
       [matAutocomplete]="subject"/>
     <mat-autocomplete

src/app/degree-planner/course-search/course-search.component.ts

@@ -54,6 +54,8 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
   public searchOpenSubscribe: Subscription;
   public mobileView: MediaQueryList;
 
+  private shouldClearSubject: boolean;
+
   constructor(
     private store: Store<GlobalState>,
     private fb: FormBuilder,
@@ -63,6 +65,7 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
     public constants: ConstantsService,
   ) {
     this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+    this.shouldClearSubject = true;
   }
 
   public ngOnInit(): void {
@@ -166,10 +169,11 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
 
   public subjectChange($event, input) {
     const { search, term, subject } = this.courseSearchForm.value;
-    this.search(search, term, subject);
+    // blur the element so that the field shows the first characters of long options
+    input.blur();
 
-    // Focus is needed to keep the cursor at the start of the input after a selection is made
-    input.focus();
+    this.search(search, term, subject);
+    this.shouldClearSubject = true;
   }
 
   // Get a subject code from text
@@ -194,8 +198,6 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
 
   // Run a search and display all results if the serach is valid
   public search(search, term, subject) {
-    // Get the form field values
-
     // Check if subject is valid
     const subjectCode = this.getSubjectCode(subject);
 
@@ -250,4 +252,18 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
       });
     }
   }
+
+  public clearSubject() {
+    if (!this.shouldClearSubject) {
+      return;
+    }
+
+    const { term, search } = this.courseSearchForm.value;
+    this.shouldClearSubject = false;
+    this.courseSearchForm.setValue({
+      subject: '',
+      search,
+      term,
+    });
+  }
 }