From ed9748f8ac63bb583366fe50998241842ea774fd Mon Sep 17 00:00:00 2001
From: Gerjan van Geest <gerjan.van.geest@ing.com>
Date: Wed, 26 Apr 2023 09:44:26 +0200
Subject: [PATCH] fix(listbox): add user-input-changed event

---
 .changeset/little-lies-applaud.md                |  5 +++++
 .../ui/components/listbox/src/ListboxMixin.js    |  1 +
 .../listbox/test-suites/ListboxMixin.suite.js    | 16 ++++++++++++++++
 3 files changed, 22 insertions(+)
 create mode 100644 .changeset/little-lies-applaud.md

diff --git a/.changeset/little-lies-applaud.md b/.changeset/little-lies-applaud.md
new file mode 100644
index 0000000000..f598c45b95
--- /dev/null
+++ b/.changeset/little-lies-applaud.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[listbox] add user-input-changed event
diff --git a/packages/ui/components/listbox/src/ListboxMixin.js b/packages/ui/components/listbox/src/ListboxMixin.js
index fb49ada940..1456e89bda 100644
--- a/packages/ui/components/listbox/src/ListboxMixin.js
+++ b/packages/ui/components/listbox/src/ListboxMixin.js
@@ -581,6 +581,7 @@ const ListboxMixinImplementation = superclass =>
     _onChildActiveChanged({ target }) {
       if (target.active === true) {
         this.__setChildActive(target);
+        this.dispatchEvent(new Event('user-input-changed', { bubbles: true }));
       }
     }
 
diff --git a/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js b/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
index 86b705faf6..364c65f669 100644
--- a/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
+++ b/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
@@ -111,6 +111,22 @@ export function runListboxMixinSuite(customConfig = {}) {
         expect(spy.callCount).to.equal(1);
       });
 
+      it('should dispatch user-input-changed event on child active change', async () => {
+        const spy = sinon.spy();
+        const el = await fixture(html`
+          <${tag}>
+            <${optionTag} .choiceValue="${'10'}">Item 1</${optionTag}>
+            <${optionTag} .choiceValue="${'20'}">Item 2</${optionTag}>
+            <${optionTag} .choiceValue="${'30'}">Item 3</${optionTag}>
+          </${tag}>
+        `);
+
+        el.addEventListener('user-input-changed', spy);
+        expect(spy.callCount).to.equal(0);
+        el.formElements[2].active = true;
+        expect(spy.callCount).to.equal(1);
+      });
+
       it('automatically sets the name attribute of child checkboxes to its own name', async () => {
         const el = await fixture(html`
         <${tag} name="foo">