fix: fire input event when clearing on Esc (#3408) (#3409)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Feb 8, 2022 · d0f0627 · d0f0627
1 parent 81ba47b
commit d0f0627
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/packages/field-base/src/input-control-mixin.js b/packages/field-base/src/input-control-mixin.js
@@ -107,9 +107,7 @@ export const InputControlMixin = (superclass) =>
     _onClearButtonClick(event) {
       event.preventDefault();
       this.inputElement.focus();
-      this.clear();
-      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
-      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+      this.__clear();
     }
 
     /**
@@ -137,10 +135,8 @@ export const InputControlMixin = (superclass) =>
     _onKeyDown(event) {
       super._onKeyDown(event);
 
-      if (event.key === 'Escape' && this.clearButtonVisible) {
-        const dispatchChange = !!this.value;
-        this.clear();
-        dispatchChange && this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+      if (event.key === 'Escape' && this.clearButtonVisible && !!this.value) {
+        this.__clear();
       }
     }
 
@@ -167,4 +163,11 @@ export const InputControlMixin = (superclass) =>
         })
       );
     }
+
+    /** @private */
+    __clear() {
+      this.clear();
+      this.inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+      this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
   };
diff --git a/packages/field-base/test/input-control-mixin.test.js b/packages/field-base/test/input-control-mixin.test.js
@@ -114,6 +114,17 @@ describe('input-control-mixin', () => {
       expect(input.value).to.equal('foo');
     });
 
+    it('should dispatch input event when clearing value on Esc', () => {
+      const spy = sinon.spy();
+      input.addEventListener('input', spy);
+      element.clearButtonVisible = true;
+      escKeyDown(button);
+      expect(spy.calledOnce).to.be.true;
+      const event = spy.firstCall.args[0];
+      expect(event.bubbles).to.be.true;
+      expect(event.composed).to.be.true;
+    });
+
     it('should dispatch change event when clearing value on Esc', () => {
       const spy = sinon.spy();
       input.addEventListener('change', spy);