diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index e24ec9ef3..ec13abe39 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -238,7 +238,12 @@ export class LionSelectRich extends OverlayMixin( * @override * @param {*} child */ - addFormElement(child) { + addFormElement(passedChild) { + const child = passedChild; + + // Set the name property on the option elements ourselves, for form serialization + child.name = `${this.name}[]`; + super.addFormElement(child); // we need to adjust the elements being registered /* eslint-disable no-param-reassign */ diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index 50705c0c1..d780e4e08 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -25,6 +25,23 @@ describe('lion-select-rich', () => { expect(el.hasAttribute('tabindex')).to.be.false; }); + it('delegates the name attribute to its children options', async () => { + const el = await fixture(html` + + + Item 1 + Item 2 + + + `); + + const optOne = el.querySelectorAll('lion-option')[0]; + const optTwo = el.querySelectorAll('lion-option')[1]; + + expect(optOne.name).to.equal('foo[]'); + expect(optTwo.name).to.equal('foo[]'); + }); + describe('Invoker', () => { it('generates an lion-select-invoker if no invoker is provided', async () => { const el = await fixture(html`