From c99d4744ab87d2b58fd809545d9134ba2f30b217 Mon Sep 17 00:00:00 2001
From: Scott Berg <saberg3@wisc.edu>
Date: Thu, 11 Apr 2019 14:38:07 -0500
Subject: [PATCH] Clear subject select on focus.

---
 .../course-search.component.html              |  1 +
 .../course-search/course-search.component.ts  | 26 +++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/app/degree-planner/course-search/course-search.component.html b/src/app/degree-planner/course-search/course-search.component.html
index 0394538..04845e2 100644
--- a/src/app/degree-planner/course-search/course-search.component.html
+++ b/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
diff --git a/src/app/degree-planner/course-search/course-search.component.ts b/src/app/degree-planner/course-search/course-search.component.ts
index 341e382..f5bff94 100644
--- a/src/app/degree-planner/course-search/course-search.component.ts
+++ b/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,
+    });
+  }
 }
-- 
GitLab