vaadin-grid how to control when filter input triggers the dataProvider function?

I'm using Vaadin web components in a Polymer 3.0 app. Client-side Javascript only. No Flow, no Java backend. After updating web components from v14 to v24, vaadin-grid-filter's internal text field now immediately populates when the user enters a value into the filter's slotted vaadin-text-field. That automatically triggers a call to the dataProvider callback function. It doesn't happen automatically in v14. With v14 I have control over when the dataProvider is called.

Here's the updated code in vaadin-grid-filter showing the addition of a filter controller that appears to be the key to the change in behavior:

  static get observers() {
    return ['_filterChanged(path, value, _textField)'];
  }

  /** @protected */
  ready() {
    super.ready();

    this._filterController = new SlotController(this, '', 'vaadin-text-field', {
      initializer: (field) => {
        field.addEventListener('value-changed', (e) => {
          this.value = e.detail.value;
        });

        this._textField = field;
      },
    });
    this.addController(this._filterController);
  }

I need to be able to wait for the user to press a search button before the dataProvider callback is called. This works as needed in v14. Is there a way to get it to work in v24?

Solution

I have not done that in exactly same scenario as you, but I have something similar in my Lit based Hilla demo app.

I am using vaadin-text-field declaratively and binding input event.

    <vaadin-text-field
      id="email"
      .value=${this.filterText}
      @input=${this.updateFilter}
      clear-button-visible
    >
    </vaadin-text-field>

And in my updateFilter function I am triggering vaadin-grid to refresh with clearCache function. This function will also trigger vaadin-grid to run the dataProvider callback.

  updateFilter(e: { target: HTMLInputElement }) {
    this.filterText = e.target.value;
    this.grid.clearCache(); // I think this is the thing you are looking for
  }

And I am then just using the filterText in my callback function.