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,150 @@
+<!doctype html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <title>vaadin-combo-box events 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="combo-box">
+ <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('combo-box');
+ comboBox.allowCustomValue = true;
+ input = comboBox.inputElement.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(input.value).to.equal('foo');
+ // Clear selection in the dropdown.
+ esc(input);
+ // Clear the user input.
+ esc(input);
+ expect(input.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';
+ input.dispatchEvent(new CustomEvent('input'));
+ 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(input.value).to.equal('foo');
+ clearButton.click();
+ expect(input.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(input.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) {