From b9ba3dbe140b93fb6a12ff2eb2196d0737cde0d8 Mon Sep 17 00:00:00 2001
From: Joren Broekema <joren.broekema@ing.com>
Date: Fri, 11 Oct 2019 11:42:23 +0200
Subject: [PATCH] fix(select-rich): set dynamically name prop on child option
 elements

---
 packages/select-rich/src/LionSelectRich.js      |  7 ++++++-
 .../select-rich/test/lion-select-rich.test.js   | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

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`
+      <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`