Reset search text of Clarity Comboboxes

combobox-reset-searchtext.directive.ts

import {Directive, OnInit} from '@angular/core';
import {ClrCombobox} from '@clr/angular';

/**
 * Utility directive to add a missing feature to Clarity comboboxes: Resetting the combobox search text after a
 * selection. Clarity didn't add it for a11y reasons - for apps that don't need to worry about this in such a strct way
 * this directive can help. Attach it to any Clariy Combobox and the searchtext will be set to empty string after the 
 * selection changes.
 */
@Directive({
  selector: '[appComboboxResetSearchtext]'
})
export class ComboboxResetSearchtextDirective implements OnInit {

  constructor(private host: ClrCombobox<any>) {
  }

  /**
   * Subscribes to combobox selection changes and resets the search texts of the combobox in case of a change.
   */
  ngOnInit() {
    this.host.clrSelectionChange.subscribe(() => {
      this.host.searchText = '';
      (this.host as any).toggleService.open = false; // Avoid delay before options close, hack type to access private
    });
  }

}