fix: update vaadin-grid-filter to use input event instead of value-changed (#7275) (CP: 24.3)

packages/grid/src/vaadin-grid-filter-element-mixin.js

@@ -69,12 +69,8 @@ export const GridFilterElementMixin = (superClass) =>
 
       this._filterController = new SlotController(this, '', 'vaadin-text-field', {
         initializer: (field) => {
-          field.addEventListener('value-changed', (e) => {
-            if (field.__previousValue === undefined && e.detail.value === '') {
-              field.__previousValue = e.detail.value;
-              return;
-            }
-            this.value = e.detail.value;
+          field.addEventListener('input', (e) => {
+            this.value = e.target.value;
           });
 
           this._textField = field;
@@ -88,12 +84,8 @@ export const GridFilterElementMixin = (superClass) =>
       if (path === undefined || value === undefined || !textField) {
         return;
       }
-      if (this._previousValue === undefined && value === '') {
-        return;
-      }
 
       textField.value = value;
-      this._previousValue = value;
 
       this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
         this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));

packages/grid/test/filtering.common.js

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fire, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
+import { fire, fixtureSync, nextFrame, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { html, LitElement } from 'lit';
 import { flushGrid, getBodyCellContent, getHeaderCellContent, getVisibleItems, scrollToEnd } from './helpers.js';
@@ -25,14 +25,16 @@ class FilterWrapper extends LitElement {
           display: block;
         }
       </style>
-      <vaadin-grid-filter path="foo" .value="${this._filterValue}">
-        <input @input="${this._onFilterInput}" />
-      </vaadin-grid-filter>
+      <vaadin-grid-filter
+        path="foo"
+        .value="${this._filterValue}"
+        @value-changed="${this._onValueChanged}"
+      ></vaadin-grid-filter>
     `;
   }
 
-  _onFilterInput(e) {
-    this._filterValue = e.target.value;
+  _onValueChanged(e) {
+    this._filterValue = e.detail.value;
   }
 }
 
@@ -51,9 +53,9 @@ describe('filter', () => {
 
   beforeEach(async () => {
     filterWrapper = fixtureSync('<filter-wrapper></filter-wrapper>');
-    await filterWrapper.updateComplete;
+    await nextRender();
     filter = filterWrapper.shadowRoot.querySelector('vaadin-grid-filter');
-    clock = sinon.useFakeTimers();
+    clock = sinon.useFakeTimers({ shouldClearNativeTimers: true });
   });
 
   afterEach(() => {
@@ -68,6 +70,30 @@ describe('filter', () => {
     expect(spy.calledOnce).to.be.true;
   });
 
+  it('should fire `filter-changed` on field input event', async () => {
+    const spy = sinon.spy();
+    const input = filter.querySelector('input');
+    filter.addEventListener('filter-changed', spy);
+    input.value = 'foo';
+    fire(input, 'input');
+    await clock.tickAsync(200);
+    expect(spy.calledOnce).to.be.true;
+  });
+
+  it('should fire `filter-changed` on field input event with empty string', async () => {
+    const spy = sinon.spy();
+    const input = filter.querySelector('input');
+    filter.addEventListener('filter-changed', spy);
+    input.value = 'foo';
+    fire(input, 'input');
+    await clock.tickAsync(200);
+    spy.resetHistory();
+    input.value = '';
+    fire(input, 'input');
+    await clock.tickAsync(200);
+    expect(spy.calledOnce).to.be.true;
+  });
+
   it('should fire `filter-changed` on path change', async () => {
     filter.value = 'foo';
     await clock.tickAsync(200);
@@ -245,7 +271,8 @@ describe('filtering', () => {
     });
 
     it('should apply the input fields value to the filter', async () => {
-      filterTextField.value = 'foo';
+      filterTextField.inputElement.value = 'foo';
+      fire(filterTextField.inputElement, 'input');
       await nextFrame();
       expect(filter.value).to.equal('foo');
     });