feat: add internal has-input-value-changed event

packages/field-base/src/input-mixin.js

@@ -52,14 +52,24 @@ export const InputMixin = dedupingMixin(
             observer: '_valueChanged',
             notify: true,
           },
+
+          /**
+           * When true, the input element has a non-empty value entered by the user.
+           * @protected
+           */
+          _hasInputValue: {
+            type: Boolean,
+            value: false,
+            observer: '_hasInputValueChanged',
+          },
         };
       }
 
       constructor() {
         super();
 
         this._boundOnInput = this._onInput.bind(this);
-        this._boundOnChange = this._onChange.bind(this);
+        this._boundOnChange = this.__onChange.bind(this);
       }
 
       /**
@@ -126,6 +136,17 @@ export const InputMixin = dedupingMixin(
         }
       }
 
+      /**
+       * Observer to notify about the change of private property.
+       *
+       * @private
+       */
+      _hasInputValueChanged(hasValue, oldHasValue) {
+        if (hasValue || oldHasValue) {
+          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+        }
+      }
+
       /**
        * An input event listener used to update the field value.
        *
@@ -147,6 +168,18 @@ export const InputMixin = dedupingMixin(
        */
       _onChange(_event) {}
 
+      /**
+       * A change event listener used to update `_hasInputValue` property.
+       * Do not override this method.
+       *
+       * @param {Event} event
+       * @private
+       */
+      __onChange(event) {
+        this._hasInputValue = event.target.value.length > 0;
+        this._onChange(event);
+      }
+
       /**
        * Toggle the has-value attribute based on the value property.
        * @param {boolean} hasValue

packages/field-base/test/input-mixin.test.js

@@ -110,11 +110,12 @@ const runTests = (baseClass) => {
   });
 
   describe('events', () => {
-    let eventsTag, inputSpy, changeSpy;
+    let eventsTag, inputSpy, changeSpy, hasInputValueSpy;
 
     before(() => {
       inputSpy = sinon.spy();
       changeSpy = sinon.spy();
+      hasInputValueSpy = sinon.spy();
 
       eventsTag = define[baseClass](
         'input-mixin-events',
@@ -134,6 +135,7 @@ const runTests = (baseClass) => {
 
     beforeEach(async () => {
       element = fixtureSync(`<${eventsTag}></${eventsTag}>`);
+      element.addEventListener('has-input-value-changed', hasInputValueSpy);
       await nextRender();
       input = document.createElement('input');
       element.appendChild(input);
@@ -144,6 +146,7 @@ const runTests = (baseClass) => {
     afterEach(() => {
       inputSpy.resetHistory();
       changeSpy.resetHistory();
+      hasInputValueSpy.resetHistory();
     });
 
     it('should call an input event listener', () => {
@@ -156,6 +159,18 @@ const runTests = (baseClass) => {
       expect(changeSpy.calledOnce).to.be.true;
     });
 
+    it('should fire has-input-value-changed event on user value change', async () => {
+      input.value = 'foo';
+      input.dispatchEvent(new CustomEvent('change'));
+      await nextFrame();
+
+      input.value = '';
+      input.dispatchEvent(new CustomEvent('change'));
+      await nextFrame();
+
+      expect(hasInputValueSpy.calledTwice).to.be.true;
+    });
+
     it('should not call an input event listener when input is unset', async () => {
       element.removeChild(input);
       element._setInputElement(undefined);

packages/time-picker/src/vaadin-time-picker.js

@@ -111,7 +111,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
           auto-open-disabled="[[autoOpenDisabled]]"
           position-target="[[_inputContainer]]"
           theme$="[[_theme]]"
-          on-change="__onChange"
+          on-change="__onComboBoxChange"
         >
           <vaadin-input-container
             part="input-field"
@@ -581,7 +581,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
   }
 
   /** @private */
-  __onChange(event) {
+  __onComboBoxChange(event) {
     event.stopPropagation();
 
     this.validate();