DataTable - Losing focus on filter input box

[trudeo]

I am using the Data Table component (with lazy loading) and have implemented the filtering. However, when typing in one of the filter column, the focus on the input is lost.

I did not add any CSS or styling. Any idea why I would lose focus after each key stoke?

Code: Select all

<p>
  entity works!
</p>

<p-dataTable [value]="entities" [rows]="10" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" (onLazyLoad)="loadEntities($event)">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="col.sortable" [filter]="col.filter"></p-column>
</p-dataTable>

Code: Select all

import { Component, Input, OnInit } from '@angular/core';
import { Column, DataTable, Paginator, LazyLoadEvent, FilterMetadata } from 'primeng/primeng';
import { Car, Person, EntityType, Filter } from '../domain/car';
import { EntityService } from '../entity.service';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';

@Component({
  moduleId: module.id,
  selector: 'app-entity',
  templateUrl: 'entity.component.html',
  styleUrls: ['entity.component.css'],
  directives: [Column, DataTable, Paginator],
  providers: [EntityService],  
})

export class EntityComponent implements OnInit {

  constructor(private entityService: EntityService) { }

  @Input() entityType: EntityType;

  entities: any[];
  
  cols: any[];
  
  totalRecords: number;

  loadEntities(event: LazyLoadEvent) {   
    console.debug(`EntityComponent.loadEntities() - Loading ${event.rows} rows of entites starting from ${event.first}. SortField = ${event.sortField}. SortOrder = ${event.sortOrder}. Filters = ${event.filters}.`);

    let filters : Filter[] = this.GetFilters(event);

    this.entityService.get(this.entityType, event.first, event.rows, event.sortField, event.sortOrder, filters)
        .subscribe(e => { 
          console.debug(`EntityComponent.loadEntities() - Loaded ${e.data.length} entites. The total count is ${e.count}. SortField = ${event.sortField}. SortOrder = ${event.sortOrder}. Filters = ${event.filters}.`);
          
          this.cols = e.columnDefinition;
          this.totalRecords = e.count; 
          this.entities = e.data; 
        });                
  }

  private GetFilters(event: LazyLoadEvent) : Filter[]
  {
    let filters : Filter[] = [];
    for (var filterKey in event.filters) {
        let filter : FilterMetadata = event.filters[filterKey];
        console.debug(`EntityComponent.loadEntities() - ${filterKey} - ${filter.matchMode} - ${filter.value}.`)

        filters.push(new Filter(filterKey, filter.value))
    }

    return filters;
  }

  ngOnInit() {
    console.debug("ngOnInit executed.")
  }
}