fix: set initial value using property to ensure change is fired (#6606)…

… (#6609) Co-authored-by: Serhii Kulykov <[email protected]>
vaadin · Oct 6, 2023 · 0914f3d · 0914f3d
1 parent 4127e99
commit 0914f3d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/field-base/src/input-controller.js b/packages/field-base/src/input-controller.js
@@ -16,7 +16,7 @@ export class InputController extends SlotController {
       () => document.createElement('input'),
       (host, node) => {
         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
@@ -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.calledOnce).to.be.true;
+    });
   });
 
   describe('type property', () => {