0

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?

robg
  • 15
  • 5

1 Answers1

0

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.

Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
  • Thanks, @Tatu Lund. Your example made me realize that, per column, I need `vaadin-text-field` but I don't need `vaadin-grid-filter`. Including it is what's causing `clearCache()` to be called as the user is typing. In v14, I was able to control when the `vaadin-text-field`'s value was copied to `vaadin-grid-filter`. Now it happens in `vaadin-grid-filter`, as the user types, per the code snippet in my question above. – robg May 17 '23 at 04:17