While troubleshooting a bug related to search functionality on my page, I encountered an issue with the search component. The search feature is working correctly and returning the expected values. However, when I clear the search criteria, I noticed that the first letter of the previous search term remains visible instead of disappearing.
After spending two hours reviewing the code, I identified the section of code causing the problem but am unsure how to resolve it.
The HTML for my component includes:
<mat-form-field appearance="standard">
<input matInput
pageSearch
placeholder="{{'searchSettings'|translate}}">
</mat-form-field>
The pageSearch directive is defined to trigger the valueChange method every time a key is released:
ngAfterViewInit() {
const subscription = this.router.events
.pipe(filter(e => e instanceof NavigationStart))
.subscribe(event => {
if (event) {
this.pageSearchService.term.next('');
}
}
);
this.subscriptionsManager.add(subscription);
}
@HostListener('keyup')
valueChange() {
this.pageSearchService.term.next(
this.elementRef.nativeElement.value
);
}
The pageSearchService used by the directive is defined as follows:
@Injectable()
export class PageSearchService {
term: BehaviorSubject<string>;
searchableMatch: EventEmitter<any> = new EventEmitter<any>();
constructor() {
this.term = new BehaviorSubject('');
}
}
I suspect that the problem lies in the directive always expecting a next() value and retaining the last value even when null. I attempted different approaches to address this issue without success:
- Adding a condition to check for empty string before calling
BehaviorSubject
valueChange() {
if (this.elementRef.nativeElement.value !== '') {
this.pageSearchService.term.next(
this.elementRef.nativeElement.value
);
}
}
An alternative approach
valueChange() {
if (this.elementRef.nativeElement.value !== '') {
this.pageSearchService.term.next(
this.elementRef.nativeElement.value
);
} else {
this.pageSearchService.term.unsubscribe();
this.pageSearchService.term._subscribe(this.elementRef.nativeElement.value);
}
}
However, both attempts resulted in errors. I'm currently at a loss on how to proceed and seek guidance on resolving the issue related to handling an empty string within the directive.
Additionally, there are other directives using the searchableMatch EventEmitter:
The SearchNoResultsDirective:
export class SearchNoResultsDirective implements AfterViewInit, OnDestroy {
@Input('searchNoResults') sectionsId: string[];
subscriptionsManager: Subscription = new Subscription();
visibility: {
term: string,
visible: boolean
} = {
term: '',
visible: true
};
.
.
.
The SearchableSectionDirective:
export class SearchableSectionDirective extends BaseClass implements AfterViewInit {
@Input('searchableSection') sectionId: string;
.
.
.
And the SearchableDirective:
export class SearchableDirective implements AfterViewInit, OnDestroy {
@Input('searchable') sectionId: string;
@Input() highlightColor = '#FFF176';
match: EventEmitter<any> = new EventEmitter<any>();
subscriptionsManager: Subscription = new Subscription();
originalText: string;
ngAfterViewInit() {
this.originalText = this.elementRef.nativeElement.innerText;
this.subscriptionsManager.add(
this.pageSearchService.term.subscribe(term => this.checkIfMatch(term))
);
}
.
.
.
I am examining these directives to identify any potential issues that may be impacting the search functionality.