diff --git a/packages/field-base/src/input-controller.js b/packages/field-base/src/input-controller.js index cd9196d0d7..664bf66821 100644 --- a/packages/field-base/src/input-controller.js +++ b/packages/field-base/src/input-controller.js @@ -13,7 +13,7 @@ export class InputController extends SlotController { super(host, 'input', 'input', { initializer: (node, host) => { if (host.value) { - node.setAttribute('value', host.value); + node.value = host.value; } if (host.type) { node.setAttribute('type', host.type); diff --git a/packages/field-base/test/input-controller.test.js b/packages/field-base/test/input-controller.test.js index 9e786f6d4d..c543750066 100644 --- a/packages/field-base/test/input-controller.test.js +++ b/packages/field-base/test/input-controller.test.js @@ -1,5 +1,7 @@ import { expect } from '@esm-bundle/chai'; import { fixtureSync } from '@vaadin/testing-helpers'; +import { sendKeys } from '@web/test-runner-commands'; +import sinon from 'sinon'; import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; import { InputController } from '../src/input-controller.js'; @@ -71,6 +73,21 @@ describe('input-controller', () => { input = element.querySelector('[slot=input]'); expect(input.value).to.equal('foo'); }); + + it('should dispatch change event when clearing input', async () => { + element.addController(new InputController(element)); + input = element.querySelector('[slot=input]'); + + const spy = sinon.spy(); + input.addEventListener('change', spy); + + input.focus(); + input.select(); + await sendKeys({ press: 'Backspace' }); + input.blur(); + + expect(spy).to.be.calledOnce; + }); }); describe('type property', () => {