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 03945388f646b0a9fa45c8aaafc35099f9cfa86e..04845e2a9b6e9abef3bdb488d88023d9b32d97a0 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 341e382ff9df329d612379b5a4f5d2b5a2b90b9b..f5bff94e85b7b57f6f6e1537748aca7beede5cf1 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, + }); + } }