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} .choiceValue="${'20'}">Item 2 + <${optionTag} .choiceValue="${'30'}">Item 3 + + `); + + 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">