From 48a4d8f2ab0d436f9300a9c599b2437c0ce5ee8d Mon Sep 17 00:00:00 2001
From: web-padawan <iamkulykov@gmail.com>
Date: Tue, 8 Feb 2022 10:55:39 +0200
Subject: [PATCH] fix: fire input event when clearing on Esc

---
 packages/field-base/src/input-control-mixin.js  | 17 ++++++++++-------
 .../field-base/test/input-control-mixin.test.js | 11 +++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/field-base/src/input-control-mixin.js b/packages/field-base/src/input-control-mixin.js
index 2e5a6123a5..5d3b0dfa23 100644
--- 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
index 36cdcbdb2d..4c26e26dae 100644
--- 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);