Angular kendo combo box cannot hide when no data

Question

I'm working with angular and kendo, I use kendo combobox to display some value as here.

I want to hide the popup when no data match, but I cannot do that.

Please help me.

Answer 1

you have to use [combobox.toggle()][1] in filter function when data.length is zero and combobox.isOpen is false

Template

 <div class="example-wrapper">
          <kendo-combobox
            #combo
              [data]="data"
              [textField]="'text'"
              [valueField]="'value'"
              [filterable]="true"
              (filterChange)="handleFilter($event)"
              [placeholder]="'T-shirt size'"
          >
          <ng-template kendoComboBoxNoDataTemplate>
            No data found!
          </ng-template>
          </kendo-combobox>
      </div>

component

export class AppComponent {
  @ViewChild('combo') combo:ComboBoxComponent

    public source: Array<{ text: string, value: number }> = [
        { text: 'Small', value: 1 },
        { text: 'Medium', value: 2 },
        { text: 'Large', value: 3 }
    ];

    public data: Array<{ text: string, value: number }>;

    constructor() {
        this.data = this.source.slice();
    }

    handleFilter(value) {
        this.data = this.source.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);

      if(this.data.length == 0 && this.combo.isOpen){
    this.combo.toggle()
  }
    }
}

this is full example