From 0914f3dba620c48dd4ecad15e01e146c46c1d764 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Fri, 6 Oct 2023 14:37:21 +0200
Subject: [PATCH] fix: set initial value using property to ensure change is
 fired (#6606) (#6609)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
---
 packages/field-base/src/input-controller.js     |  2 +-
 .../field-base/test/input-controller.test.js    | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/field-base/src/input-controller.js b/packages/field-base/src/input-controller.js
index b1b25b8a05..4aa9457d30 100644
--- 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
index 57905867d2..e22bf8cc57 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.calledOnce).to.be.true;
+    });
   });
 
   describe('type property', () => {