vaadin · vursen · May 8, 2023 · May 4, 2023 · May 5, 2023 · May 5, 2023
diff --git a/src/vaadin-combo-box-mixin.html b/src/vaadin-combo-box-mixin.html
@@ -170,6 +170,16 @@
           notify: true
         },
 
+        /**
+         * Whether the input element has a non-empty value.
+         * @protected
+         */
+        _hasInputValue: {
+          type: Boolean,
+          value: false,
+          observer: '_hasInputValueChanged',
+        },
+
         /**
          * Path for label of the item. If `items` is an array of objects, the
          * `itemLabelPath` is used to fetch the displayed string label for each
@@ -265,7 +275,8 @@
         '_templateOrRendererChanged(_itemTemplate, renderer)',
         '_loadingChanged(loading)',
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_toggleElementChanged(_toggleElement)'
+        '_toggleElementChanged(_toggleElement)',
+        '_inputElementValueChanged(_inputElementValue)'
       ];
     }
 
@@ -636,6 +647,7 @@
       this.selectedItem = null;
 
       if (this.allowCustomValue) {
+        this._inputElementValue = '';
         this.value = '';
       }
 
@@ -767,6 +779,10 @@
       }
     }
 
+    _inputElementValueChanged(inputElementValue) {
+      this._hasInputValue = inputElementValue != null ? inputElementValue.length > 0 : false;
+    }
+
     /** @private */
     _filterFromInput(e) {
       if (!this.opened && !e.__fromClearButton && !this.autoOpenDisabled) {
@@ -1093,6 +1109,17 @@
       this._clear();
     }
 
+    /**
+     * Observer to notify about the change of private property.
+     *
+     * @private
+     */
+    _hasInputValueChanged(hasValue, oldHasValue) {
+      if (hasValue || oldHasValue) {
+        this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+      }
+    }
+
     /**
      * @param {boolean} invalid
      * @protected

diff --git a/test/events.html b/test/events.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-combo-box validation tests</title>
+
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src='../../webcomponentsjs/webcomponents-lite.js'></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+  <link rel='import' href='common-imports.html'>
+  <script src="common.js"></script>
+</head>
+
+<body>
+  <test-fixture id="combobox">
+    <template>
+      <vaadin-combo-box></vaadin-combo-box>
+    </template>
+  </test-fixture>
+  <script>
+    (ios ? describe.skip : describe)('events', () => {
+      function inputChar(target, char) {
+        target.value += char;
+        MockInteractions.keyDownOn(target, char.charCodeAt(0));
+        target.dispatchEvent(new CustomEvent('input', {bubbles: true, composed: true}));
+      }
+
+      function inputText(target, text) {
+        for (var i = 0; i < text.length; i++) {
+          inputChar(target, text[i]);
+        }
+      }
+
+      function arrowDown(target) {
+        MockInteractions.keyDownOn(target, 40);
+      }
+
+      function enter(target) {
+        MockInteractions.pressEnter(target);
+      }
+
+      function space(target) {
+        MockInteractions.pressSpace(target);
+      }
+
+      function esc(target) {
+        MockInteractions.keyDownOn(target, 27, null, 'Escape');
+      }
+
+      describe('has-input-value-changed event', () => {
+        let comboBox, input, clearButton, hasInputValueChangedSpy, valueChangedSpy;
+
+        beforeEach(async() => {
+          hasInputValueChangedSpy = sinon.spy();
+          valueChangedSpy = sinon.spy();
+          comboBox = fixture('combobox');
+          comboBox.allowCustomValue = true;
+          input = comboBox.inputElement;
+          comboBox.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+          comboBox.addEventListener('value-changed', valueChangedSpy);
+          input.focus();
+        });
+
+        describe('without value', () => {
+
+          describe('with user input', () => {
+            beforeEach(async() => {
+              inputText(input, 'foo');
+              hasInputValueChangedSpy.reset();
+              valueChangedSpy.reset();
+            });
+
+            it('should be fired when clearing the user input with Esc', async() => {
+              expect(comboBox.inputElement.value).to.equal('foo');
+              // Clear selection in the dropdown.
+              esc(input);
+              // Clear the user input.
+              esc(input);
+              expect(comboBox.inputElement.value).to.be.empty;
+              expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+            });
+
+            it('should not fire the event when modifying input', async() => {
+              input.value = 'foobar';
+              input.dispatchEvent(new CustomEvent('input'));
+              expect(hasInputValueChangedSpy.called).to.be.false;
+            });
+
+            it('should fire the event once when removing input', async() => {
+              input.value = '';
+              input.dispatchEvent(new CustomEvent('input'));
+              expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+              expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
+            });
+
+            it('should fire the event once on programmatic clear', async() => {
+              comboBox._clear();
+              expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+              expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
+            });
+          });
+
+          describe('without user input', () => {
+            it('should fire the event once when entering input', async() => {
+              input.value = 'foo';
+              expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+              expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
+            });
+
+            it('should not fire the event on programmatic clear', async() => {
+              comboBox._clear();
+              expect(hasInputValueChangedSpy.called).to.be.false;
+            });
+          });
+        });
+
+        describe('with value', () => {
+          beforeEach(async() => {
+            comboBox.clearButtonVisible = true;
+            clearButton = comboBox.inputElement.$.clearButton;
+            inputText(input, 'foo');
+            enter(input);
+            valueChangedSpy.reset();
+            hasInputValueChangedSpy.reset();
+          });
+
+          it('should be fired on clear button click', () => {
+            expect(comboBox.inputElement.value).to.equal('foo');
+            clearButton.click();
+            expect(comboBox.inputElement.value).to.be.empty;
+            expect(valueChangedSpy.calledOnce).to.be.true;
+            expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+            expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
+          });
+
+          it('should be fired when clearing the value with Esc', async() => {
+            esc(input);
+            expect(comboBox.inputElement.value).to.be.empty;
+            expect(valueChangedSpy.calledOnce).to.be.true;
+            expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+            expect(hasInputValueChangedSpy.calledBefore(valueChangedSpy)).to.be.true;
+          });
+        });
+      });
+    });
+  </script>
+
+</body>
+
+</html>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -18,7 +18,8 @@ window.VaadinComboBoxSuites = [
   'item-template.html',
   'vaadin-combo-box-dropdown.html',
   'lazy-loading.html',
-  'validation.html'
+  'validation.html',
+  'events.html'
 ];
 
 if (isPolymer2) {