fix(select-rich): set dynamically name prop on child option elements

Author: Joren Broekema

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 */

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`
+      <lion-select-rich name="foo">
+        <lion-options slot="input">
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20}>Item 2</lion-option>
+        </lion-options>
+      </lion-select-rich>
+    `);
+
+    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`