Angular kendo grid is not loading data on filter change event if current page do not have searched value

I have a grid with a few pages. Let's say there is an item "Decaffe" on the first page, and I opened second page. Then I apply filter, by using onFilter event, by typing word "Deacaffe" in separate search box outside of the grid. And grid became empty, no result was returned. I'm attaching stackblitz example of it. How to fix this issue? I assume additional refresh needed..

@Component({
  selector: 'my-app',
  template: `
  <kendo-textbox (valueChange)="onFilter($event)"></kendo-textbox>
    <br/>
    <hr/>
        <kendo-grid 
          [filterable]="true" [filter]="filter" 
          [pageSize]="4" [pageable]="true"
          [kendoGridBinding]="gridData">
            <kendo-grid-column field="ProductID" title="ID"> </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name"> </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category"> </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price"> </kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  public filter: CompositeFilterDescriptor = {
    logic: 'and',
    filters: [
      {
        field: 'ProductName',
        operator: 'startswith',
        value: 'Chai',
        ignoreCase: true,
      },
    ],
  };

  public onFilter(inputValue: string): void {
    this.filter = {
      logic: 'or',
      filters: [
        {
          field: 'ProductName',
          operator: 'contains',
          value: inputValue,
        },
      ],
    };
  }

  public gridData: Product[] = [
    {
      ProductID: 1,
      ProductName: 'Chai',
      UnitPrice: 18,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
      },
    },

I found relatively easy solution by using DataBindingDirective with ViewChild directive, and calling skip method in the filtering event. In my case all grid is pre-loaded, otherwise you may load it with proper pagingation like in previous answer.. which would be more coding involved. Working solution: StackBlitz.

export class AppComponent {
  @ViewChild(DataBindingDirective) dataBinding: DataBindingDirective;

  public filter: CompositeFilterDescriptor = {
    logic: 'and',
    filters: [
      {
        field: 'ProductName',
        operator: 'startswith',
        value: '', 
        ignoreCase: true,
      },
    ],
  };

  public onFilter(inputValue: string): void {
    console.log(`onFilter - ${inputValue}`);

    if (inputValue) {
      this.filter = {
        logic: 'or',
        filters: [
          {
            field: 'ProductName',
            operator: 'contains',
            value: inputValue,
          },
        ],
      };
    } else {
      this.filter = {
        logic: 'or',
        filters: [],
      };
    }

    //the binding directive reference was used to set the skip property to 0. This is to ensure that the user will be returned to page 1 when filtering the Grid data.
    this.dataBinding.skip = 0;
  }