From 3e1af8389ee471f4a01098026be3586c7c100191 Mon Sep 17 00:00:00 2001
From: Wolfgang Meier <wolfgang@existsolutions.com>
Date: Tue, 1 Sep 2020 15:00:21 +0200
Subject: [PATCH] fix(pb-select): parameter serialization for multi-selection
 pb-select

---
 demo/pb-autocomplete.html  |  34 ++++++++----
 demo/pb-autocomplete2.html |   2 +-
 demo/pb-select-i18n.html   |   5 +-
 demo/pb-select.html        | 103 ++++++++++++++++++-------------------
 src/pb-autocomplete.js     |  18 +++++++
 src/pb-select.js           |  49 +++++++++++++-----
 test/pb-select.test.js     |  32 ++++++++++--
 7 files changed, 161 insertions(+), 82 deletions(-)

diff --git a/demo/pb-autocomplete.html b/demo/pb-autocomplete.html
index b3b1b3dc..72e8c8f9 100644
--- a/demo/pb-autocomplete.html
+++ b/demo/pb-autocomplete.html
@@ -21,18 +21,30 @@ <h1>Using pb-autocomplete</h1>
         <pb-demo-snippet>
             <template>
                 <pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="http://localhost:8080/exist/apps/tei-publisher">
-                    <h2>Suggestion list passed in a property</h2>
-                    <pb-autocomplete placeholder="type" suggestions='["alpha", "beta", "gamma"]'></pb-autocomplete>
-                    <h2>Suggestion list supplied by remote XQuery</h2>
-                    <pb-autocomplete placeholder="query" source="modules/autocomplete.xql"></pb-autocomplete>
-                    <h2>Combine with other form fields whose value is passed on</h2>
-                    <pb-autocomplete placeholder="query" source="modules/autocomplete.xql">
-                        <select name="field">
-                            <option value="title">Title</option>
-                            <option value="author">Author</option>
-                        </select>
-                    </pb-autocomplete>
+                    <form action="" id="form">
+                        <h2>Suggestion list passed in a property</h2>
+                        <pb-autocomplete name="autocomplete1" placeholder="type" suggestions='["alpha", "beta", "gamma"]'></pb-autocomplete>
+                        <h2>Suggestion list supplied by remote XQuery</h2>
+                        <pb-autocomplete name="autocomplete2" placeholder="query" source="modules/autocomplete.xql"></pb-autocomplete>
+                        <h2>Combine with other form fields whose value is passed on</h2>
+                        <pb-autocomplete name="autocomplete3" placeholder="query" source="modules/autocomplete.xql">
+                            <select name="field">
+                                <option value="title">Title</option>
+                                <option value="author">Author</option>
+                            </select>
+                        </pb-autocomplete>
+                        <button type="submit"><paper-button>Submit</paper-button></button>
+                    </form>
+                    <p>Parameters which would be sent: <code id="output"></code></p>
                 </pb-page>
+                <script>
+                    const form = document.getElementById('form');
+                    form.addEventListener('submit', (ev) => {
+                        ev.preventDefault();
+                        const data = new URLSearchParams(new FormData(form)).toString();
+                        document.getElementById('output').innerHTML = data;
+                    });
+                </script>
             </template>
         </pb-demo-snippet>
     </body>
diff --git a/demo/pb-autocomplete2.html b/demo/pb-autocomplete2.html
index 5322f1ea..e92e5678 100644
--- a/demo/pb-autocomplete2.html
+++ b/demo/pb-autocomplete2.html
@@ -30,7 +30,7 @@ <h1>Using pb-autocomplete with remote suggestions</h1>
         <pb-demo-snippet>
             <template>
                 <pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="http://localhost:8080/exist/apps/tei-publisher">
-                    <iron-form id="form" >
+                    <iron-form id="form">
                         <form action="">
                             <p>pb-autocomplete used with a pb-repeat:</p>
                             <pb-repeat>
diff --git a/demo/pb-select-i18n.html b/demo/pb-select-i18n.html
index 6e315cf1..95c6db21 100644
--- a/demo/pb-select-i18n.html
+++ b/demo/pb-select-i18n.html
@@ -11,8 +11,8 @@
         <script src="../node_modules/web-animations-js/web-animations-next-lite.min.js" defer></script>
         <script type="module" src="../node_modules/@polymer/paper-button/paper-button.js"></script>
         <script type="module" src="../node_modules/@polymer/paper-item/paper-item.js"></script>
-        <script type="module" src="../node_modules/@polymer/iron-form/iron-form.js"></script>
         <script type="module" src="../src/pb-page.js"></script>
+        <script type="module" src="../src/pb-form.js"></script>
         <script type="module" src="../src/pb-select.js"></script>
         <script type="module" src="../src/pb-lang.js"></script>        
         <script type="module" src="../src/pb-i18n.js"></script>        
@@ -20,7 +20,7 @@
         <!--/scripts-->
     </head>
     <body>
-        <h1>Use pb-select with i18n</h1>
+        <h1>Use pb-select with i18n and iron-form</h1>
         
         <p>This demo checks if option and selection labels are properly translated.</p>
 
@@ -45,6 +45,7 @@ <h1>Use pb-select with i18n</h1>
                             <button type="submit"><paper-button>Submit</paper-button></button>
                         </form>
                     </iron-form>
+
                     <p>Parameters which would be sent: <code id="output"></code></p>
                 </pb-page>
             
diff --git a/demo/pb-select.html b/demo/pb-select.html
index 7b88a446..3279024f 100644
--- a/demo/pb-select.html
+++ b/demo/pb-select.html
@@ -18,67 +18,64 @@
         <!--/scripts-->
     </head>
     <body>
-        <h1>Using pb-select</h1>
-        
         <pb-demo-snippet>
             <template>
                 <pb-page locales="../i18n/{{ns}}/{{lng}}.json" endpoint="http://localhost:8080/exist/apps/tei-publisher">
-                    <iron-form id="form">
-                        <form action="">
-                            <p>Single item selection:</p>
-                            <pb-select label="language" name="lang1" value="es">
-                                <paper-item value="bg">Български</paper-item>
-                                <paper-item value="cs">český</paper-item>
-                                <paper-item value="de">Deutsch</paper-item>
-                                <paper-item value="en">English</paper-item>
-                                <paper-item value="es">Español</paper-item>
-                                <paper-item value="el">ελληνικά</paper-item>
-                                <paper-item value="fr">Français</paper-item>
-                                <paper-item value="it">Italiano</paper-item>
-                                <paper-item value="ka">ქართული</paper-item>
-                                <paper-item value="nl">Nederlands</paper-item>
-                                <paper-item value="no">Norsk</paper-item>
-                                <paper-item value="pl">Polski</paper-item>
-                                <paper-item value="pt">Português</paper-item>
-                                <paper-item value="ro">Română</paper-item>
-                                <paper-item value="ru">русский</paper-item>
-                                <paper-item value="sl">Slovenščina</paper-item>
-                                <paper-item value="sv">Svenska</paper-item>
-                                <paper-item value="tr">Türkçe</paper-item>
-                                <paper-item value="uk">Українська</paper-item>
-                            </pb-select>
-                            <p>with option "multi":</p>
-                            <pb-select label="language" name="lang2" values='["fr", "de"]' multi>
-                                <paper-item value="bg">Български</paper-item>
-                                <paper-item value="cs">český</paper-item>
-                                <paper-item value="de">Deutsch</paper-item>
-                                <paper-item value="en">English</paper-item>
-                                <paper-item value="es">Español</paper-item>
-                                <paper-item value="el">ελληνικά</paper-item>
-                                <paper-item value="fr">Français</paper-item>
-                                <paper-item value="it">Italiano</paper-item>
-                                <paper-item value="ka">ქართული</paper-item>
-                                <paper-item value="nl">Nederlands</paper-item>
-                                <paper-item value="no">Norsk</paper-item>
-                                <paper-item value="pl">Polski</paper-item>
-                                <paper-item value="pt">Português</paper-item>
-                                <paper-item value="ro">Română</paper-item>
-                                <paper-item value="ru">русский</paper-item>
-                                <paper-item value="sl">Slovenščina</paper-item>
-                                <paper-item value="sv">Svenska</paper-item>
-                                <paper-item value="tr">Türkçe</paper-item>
-                                <paper-item value="uk">Українська</paper-item>
-                            </pb-select>
-                            <button type="submit"><paper-button>Submit</paper-button></button>
-                        </form>
-                    </iron-form>
+                    <h2>Using pb-select with a standard HTML form</h2>
+                    <form id="form" action="">
+                        <p>Single item selection:</p>
+                        <pb-select label="language" name="lang1" value="es">
+                            <paper-item value="bg">Български</paper-item>
+                            <paper-item value="cs">český</paper-item>
+                            <paper-item value="de">Deutsch</paper-item>
+                            <paper-item value="en">English</paper-item>
+                            <paper-item value="es">Español</paper-item>
+                            <paper-item value="el">ελληνικά</paper-item>
+                            <paper-item value="fr">Français</paper-item>
+                            <paper-item value="it">Italiano</paper-item>
+                            <paper-item value="ka">ქართული</paper-item>
+                            <paper-item value="nl">Nederlands</paper-item>
+                            <paper-item value="no">Norsk</paper-item>
+                            <paper-item value="pl">Polski</paper-item>
+                            <paper-item value="pt">Português</paper-item>
+                            <paper-item value="ro">Română</paper-item>
+                            <paper-item value="ru">русский</paper-item>
+                            <paper-item value="sl">Slovenščina</paper-item>
+                            <paper-item value="sv">Svenska</paper-item>
+                            <paper-item value="tr">Türkçe</paper-item>
+                            <paper-item value="uk">Українська</paper-item>
+                        </pb-select>
+                        <p>with option "multi":</p>
+                        <pb-select label="language" name="lang2" values='["fr", "de"]' multi>
+                            <paper-item value="bg">Български</paper-item>
+                            <paper-item value="cs">český</paper-item>
+                            <paper-item value="de">Deutsch</paper-item>
+                            <paper-item value="en">English</paper-item>
+                            <paper-item value="es">Español</paper-item>
+                            <paper-item value="el">ελληνικά</paper-item>
+                            <paper-item value="fr">Français</paper-item>
+                            <paper-item value="it">Italiano</paper-item>
+                            <paper-item value="ka">ქართული</paper-item>
+                            <paper-item value="nl">Nederlands</paper-item>
+                            <paper-item value="no">Norsk</paper-item>
+                            <paper-item value="pl">Polski</paper-item>
+                            <paper-item value="pt">Português</paper-item>
+                            <paper-item value="ro">Română</paper-item>
+                            <paper-item value="ru">русский</paper-item>
+                            <paper-item value="sl">Slovenščina</paper-item>
+                            <paper-item value="sv">Svenska</paper-item>
+                            <paper-item value="tr">Türkçe</paper-item>
+                            <paper-item value="uk">Українська</paper-item>
+                        </pb-select>
+                        <button type="submit"><paper-button>Submit</paper-button></button>
+                    </form>
                     <p>Parameters which would be sent: <code id="output"></code></p>
                 </pb-page>
                 <script>
                     const form = document.getElementById('form');
-                    form.addEventListener('iron-form-submit', (ev) => {
+                    form.addEventListener('submit', (ev) => {
                         ev.preventDefault();
-                        const data = JSON.stringify(form.serializeForm());
+                        const data = new URLSearchParams(new FormData(form)).toString();
                         document.getElementById('output').innerHTML = data;
                     });
                 </script>
diff --git a/src/pb-autocomplete.js b/src/pb-autocomplete.js
index f4fc7a30..4d2f35e1 100644
--- a/src/pb-autocomplete.js
+++ b/src/pb-autocomplete.js
@@ -74,6 +74,7 @@ export class PbAutocomplete extends pbMixin(LitElement) {
         this.placeholder = 'search.placeholder';
         this.suggestions = [];
         this.lastSelected = null;
+        this._hiddenInput = null;
     }
 
     connectedCallback() {
@@ -81,6 +82,14 @@ export class PbAutocomplete extends pbMixin(LitElement) {
     }
 
     firstUpdated() {
+        const inIronForm = this.closest('iron-form,pb-search,pb-custom-form');
+        if (!inIronForm) {
+            this._hiddenInput = document.createElement('input');
+            this._hiddenInput.type = 'hidden';
+            this._hiddenInput.name = this.name;
+            this.appendChild(this._hiddenInput);
+        }
+
         const autocomplete = this.shadowRoot.getElementById('autocomplete'); 
         autocomplete.addEventListener('autocomplete-change', this._autocomplete.bind(this));
 
@@ -99,6 +108,12 @@ export class PbAutocomplete extends pbMixin(LitElement) {
                 });
                 if (value) {
                     input.value = value.text || value;
+                    if (this._hiddenInput) {
+                        this._hiddenInput.value = value.value || value;
+                    }
+                }
+                if (this._hiddenInput) {
+                    this._hiddenInput.value = this.value;
                 }
             }
         }
@@ -195,6 +210,9 @@ export class PbAutocomplete extends pbMixin(LitElement) {
         console.log('autocomplete selected %s', ev.detail.text);
         input.value = ev.detail.text;
         this.value = input.value;
+        if (this._hiddenInput) {
+            this._hiddenInput.value = this.value;
+        }
     }
 
    
diff --git a/src/pb-select.js b/src/pb-select.js
index 938fba33..cf370e4f 100644
--- a/src/pb-select.js
+++ b/src/pb-select.js
@@ -71,20 +71,31 @@ export class PbSelect extends pbMixin(LitElement) {
     constructor() {
         super();
         this.value = null;
-        this.values = [];
+        this.values = null;
         this._items = [];
         this._selected = [];
+        this._inIronForm = false;
     }
 
     connectedCallback() {
         super.connectedCallback();
 
         this.subscribeTo('pb-i18n-update', this._refresh.bind(this));
+        // in multi-select mode, copy any value set via 'value' to 'values'
+        if (this.multi) {
+            if (!this.values && this.value) {
+                this.values = [this.value];
+            }
+            // delete this.value so it is not picked up by iron-form
+            this.value = undefined;
+        }
     }
 
     firstUpdated() {
         super.firstUpdated();
 
+        this._inIronForm = this.closest('iron-form, pb-search,pb-custom-form');
+
         const slot = this.shadowRoot.querySelector('[name="subform"]');
         if (slot) {
             slot.assignedNodes().forEach((node) => {
@@ -170,11 +181,21 @@ export class PbSelect extends pbMixin(LitElement) {
             return html`
                 <slot name="subform"></slot>
                 <iron-label for="list" part="label">${translate(this.label)}</iron-label>
-                <paper-listbox id="list" slot="dropdown-content" class="dropdown-content" .selectedValues="${this.values}" ?multi="${this.multi}"
+                ${
+                    this.multi ? 
+                html`<paper-listbox id="list" slot="dropdown-content" class="dropdown-content" 
+                    .selectedValues="${this.values}" multi
                     attr-for-selected="value" @iron-select="${this._changed}" @iron-deselect="${this._changed}">
                     <slot></slot>
                     ${this._items.map((item) => html`<paper-item value="${item.value}">${item.label}</paper-item>`)}
-                </paper-listbox>
+                </paper-listbox>` :
+                html`<paper-listbox id="list" slot="dropdown-content" class="dropdown-content" 
+                    .selected="${this.value}"
+                    attr-for-selected="value" @iron-select="${this._changed}" @iron-deselect="${this._changed}">
+                    <slot></slot>
+                    ${this._items.map((item) => html`<paper-item value="${item.value}">${item.label}</paper-item>`)}
+                </paper-listbox>`
+                }
                 <slot name="output"></slot>
             `;
         }
@@ -197,18 +218,9 @@ export class PbSelect extends pbMixin(LitElement) {
         if (this.multi) {
             this._selected = list.selectedValues;
             this.values = this._selected;
-            
-            // set value anyway for the purpose of testing serialization
-            var svalue = '';
-            this._selected.forEach((val) => {
-                if (svalue) {svalue +=', ';}
-                svalue += val;
-            });
-            this.value = '[' + svalue + ']';
         } else {
             this._selected = [list.selected];
             this.value = list.selected;
-            this.values = [];
         }
 
         // check if selected items really changed
@@ -217,6 +229,19 @@ export class PbSelect extends pbMixin(LitElement) {
             return;
         }
 
+        if (!this._inIronForm || this.multi) {
+            this._clear('[name="output"]');
+                
+            const vals = this.multi ? this.values : [this.value];
+            vals.forEach((val) => {
+                const hidden = document.createElement('input');
+                hidden.type = 'hidden';
+                hidden.name = this.name;
+                hidden.value = val;
+                hidden.slot = 'output';
+                this.appendChild(hidden);
+            });
+        }
         this.dispatchEvent(new CustomEvent('change'));
     }
 
diff --git a/test/pb-select.test.js b/test/pb-select.test.js
index 8cc6d5f6..f9bb6630 100644
--- a/test/pb-select.test.js
+++ b/test/pb-select.test.js
@@ -1,4 +1,4 @@
-import { fixture, expect, waitUntil } from '@open-wc/testing';
+import { fixture, expect, waitUntil, oneEvent } from '@open-wc/testing';
 import '../src/pb-select.js';
 import '../src/pb-page.js';
 import '@polymer/paper-item';
@@ -68,14 +68,40 @@ describe('simple select', () => {
 
         const form = el.querySelector('iron-form');
         const select = el.querySelector('pb-select');
-        expect(form.serializeForm()).to.deep.equal({'key': '[1]'});
+        expect(form.serializeForm()).to.deep.equal({'key': "1"});
         expect(select.values).to.deep.equal(['1']);
 
         select.values = ["2", "3"];
         await select.updateComplete;
         expect(select.values).to.deep.equal(['2', '3']);
         
-        expect(form.serializeForm()).to.deep.equal({'key': '[2, 3]'});
+        expect(form.serializeForm()).to.deep.equal({'key': ["2", "3"]});
+    });
+    it('works in standard HTML form', async () => {
+        let initDone;
+        document.addEventListener('pb-page-ready', () => {
+            initDone = true;
+        });
+        const el = (
+            await fixture(`
+                <pb-page endpoint=".">
+                    <form action="" id="form">
+                        <pb-select label="Items" name="key" values='["1", "2"]' multi>
+                            <paper-item></paper-item>
+                            <paper-item value="0">Item 0</paper-item>
+                            <paper-item value="1">Item 1</paper-item>
+                            <paper-item value="2">Item 2</paper-item>
+                            <paper-item value="3">Item 3</paper-item>
+                        </pb-select>
+                    </form>
+                </pb-page>
+            `)
+        );
+        await waitUntil(() => initDone);
+
+        const form = el.querySelector('form');
+        const data = new URLSearchParams(new FormData(form)).toString();
+        expect(data).to.equal('key=1&key=2');
     });
 });