fix: sync the hasInputValue state on input

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

@@ -68,8 +68,8 @@ export const InputMixin = dedupingMixin(
  constructor() {
  super();
 
- this._boundOnInput = this._onInput.bind(this);
- this._boundOnChange = this.__onChange.bind(this);
+ this._boundOnInput = this.__onInput.bind(this);
+ this._boundOnChange = this._onChange.bind(this);
  }
 
  /**
@@ -147,16 +147,36 @@ export const InputMixin = dedupingMixin(
  }
  }
 
+ /**
+ * An input event listener used to update `_hasInputValue` property.
+ * Do not override this method.
+ *
+ * @param {Event} event
+ * @private
+ */
+ __onInput(event) {
+ // In the case a custom web component is passed as `inputElement`,
+ // the actual native input element, on which the event occurred,
+ // can be inside shadow trees.
+ const target = event.composedPath()[0];
+ this._hasInputValue = target.value.length > 0;
+ this._onInput(event);
+ }
+
  /**
  * An input event listener used to update the field value.
  *
  * @param {Event} event
  * @protected
  */
  _onInput(event) {
+ // In the case a custom web component is passed as `inputElement`,
+ // the actual native input element, on which the event occurred,
+ // can be inside shadow trees.
+ const target = event.composedPath()[0];
  // Ignore fake input events e.g. used by clear button.
  this.__userInput = event.isTrusted;
- this.value = event.target.value;
+ this.value = target.value;
  this.__userInput = false;
  }
 
@@ -168,18 +188,6 @@ 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

@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
+import { fire, fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { InputMixin } from '../src/input-mixin.js';
 import { define } from './helpers.js';
@@ -110,12 +110,11 @@ const runTests = (baseClass) => {
  });
 
  describe('events', () => {
- let eventsTag, inputSpy, changeSpy, hasInputValueSpy;
+ let eventsTag, inputSpy, changeSpy;
 
  before(() => {
  inputSpy = sinon.spy();
  changeSpy = sinon.spy();
- hasInputValueSpy = sinon.spy();
 
  eventsTag = define[baseClass](
  'input-mixin-events',
@@ -135,7 +134,6 @@ 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);
@@ -146,7 +144,6 @@ const runTests = (baseClass) => {
  afterEach(() => {
  inputSpy.resetHistory();
  changeSpy.resetHistory();
- hasInputValueSpy.resetHistory();
  });
 
  it('should call an input event listener', () => {
@@ -159,18 +156,6 @@ 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);
@@ -187,6 +172,54 @@ const runTests = (baseClass) => {
  expect(changeSpy.called).to.be.false;
  });
  });
+
+ describe('has-input-value-changed event', () => {
+ let tag, hasInputValueChangedSpy;
+
+ before(() => {
+ tag = define[baseClass](
+ 'input-mixin-has-input-value-changed-event',
+ '<slot name="input"></slot>',
+ (Base) => class extends InputMixin(Base) {},
+ );
+ });
+
+ beforeEach(async () => {
+ hasInputValueChangedSpy = sinon.spy();
+ element = fixtureSync(`<${tag}></${tag}>`);
+ element.addEventListener('has-input-value-changed', hasInputValueChangedSpy);
+ await nextRender();
+ input = document.createElement('input');
+ element.appendChild(input);
+ element._setInputElement(input);
+ await nextFrame();
+ });
+
+ it('should fire the event on input value presence change', async () => {
+ input.value = 'foo';
+ fire(input, 'input');
+ await nextFrame();
+ expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+
+ hasInputValueChangedSpy.resetHistory();
+ input.value = '';
+ fire(input, 'input');
+ await nextFrame();
+ expect(hasInputValueChangedSpy.calledOnce).to.be.true;
+ });
+
+ it('should not fire the event on input if input value presence has not changed', async () => {
+ input.value = 'foo';
+ fire(input, 'input');
+ await nextFrame();
+ hasInputValueChangedSpy.resetHistory();
+
+ input.value = 'foobar';
+ fire(input, 'input');
+ await nextFrame();
+ expect(hasInputValueChangedSpy.called).to.be.false;
+ });
+ });
 };
 
 describe('InputMixin + Polymer', () => {