FIO-5687: Fix: Support multiple values in Select component setValue/updateValue in HTML 5 mode

src/components/select/Select.js

@@ -1087,13 +1087,15 @@ export default class SelectComponent extends ListComponent {
     }
     this.addEventListener(input, this.inputInfo.changeEvent, (event) => {
       let value = null;
+
       if (this.component.widget === "html5") {
-        value = event.target.value;
-
         if (this.component.multiple) {
           value = Array.from(event.target.selectedOptions).map(opt => opt.value);
+        } else {
+          value = event.target.value;
         }
       }
+
       this.updateValue(value, {
         modified: true
       })
@@ -1127,6 +1129,16 @@ export default class SelectComponent extends ListComponent {
         }
       });
 
+      this.addEventListener(input, 'change', (event) => {
+        let value = event.target.value;
+
+        if (this.component.multiple) {
+          value = Array.from(event.target.selectedOptions).map(opt => opt.value);
+        }
+
+        this.setValue(value, { modified: true });
+      });
+
       return;
     }
 
@@ -1646,6 +1658,11 @@ export default class SelectComponent extends ListComponent {
   }
 
   updateValue(value, flags) {
+    if (this.component.widget === 'html5' && this.component.multiple) {
+      if (!Array.isArray(value)) {
+        value = value != null && value !== '' ? [value] : [];
+      }
+    }
     const changed = super.updateValue(value, flags);
     if (changed || !this.selectMetadata || flags.resetValue) {
       if (this.component.multiple && Array.isArray(this.dataValue)) {
@@ -1676,6 +1693,12 @@ export default class SelectComponent extends ListComponent {
   }
 
   setValue(value, flags = {}) {
+    if (this.component.widget === 'html5' && this.component.multiple) {
+        if (!Array.isArray(value)) {
+            value = value != null && value !== '' ? [value] : [];
+        }
+    }
+
     const previousValue = this.dataValue;
     const changed = this.updateValue(value, flags);
     if (

test/unit/Panel.unit.js

@@ -69,9 +69,11 @@ describe('Panel Component', () => {
     }).catch(done);
   });
 
-  it('Should show its label in DataGrid when "Hide Label" is set to true and "Show Label in DataGrid" is set to true', () => {
+  it('Should show its label in DataGrid when "Show Label in DataGrid" is set to true', () => {
     return Formio.createForm(document.createElement('div'), comp3, {}).then((form) => {
-      assert(form.getComponent('dataGrid[0]').element.querySelector('.card-title'), 'Panel should display its label');
+      const panel = form.getComponent('panel');
+      assert(panel, 'Panel component should exist');
+      assert(panel.element.querySelector('.card-title'), 'Panel should display its label');
     });
   });
 

test/unit/Templates.unit.js

@@ -25,6 +25,8 @@ const fixComponent = (instance, index = 0) => {
   }
 };
 
+const normalizeLineEndings = (str) => str.replace(/\r\n/g, '\n');
+
 describe('Rendering Tests', () => {
   Object.keys(templates).forEach(framework => {
     describe(`Framework ${framework}`, () => {
@@ -33,7 +35,9 @@ describe('Rendering Tests', () => {
           it(`Form renders ${form}`, () => {
             return new Form(forms[form], { template: framework }).ready.then(instance => {
               fixComponent(instance);
-              assert.equal(renders[`form-${framework}-${form}`], pretty(instance.render(), { ocd: true }));
+              const expected = normalizeLineEndings(renders[`form-${framework}-${form}`]);
+              const actual = normalizeLineEndings(pretty(instance.render(), { ocd: true }));
+              assert.equal(expected, actual);
             });
           });
         });
@@ -45,7 +49,9 @@ describe('Rendering Tests', () => {
             it(`Renders ${component} for ${framework}`, (done) => {
               const instance = new AllComponents[component]({}, { template: framework });
               fixComponent(instance);
-              assert.equal(renders[`component-${framework}-${component}`], pretty(instance.render(), { ocd: true }));
+              const expected = normalizeLineEndings(renders[`component-${framework}-${component}`]);
+              const actual = normalizeLineEndings(pretty(instance.render(), { ocd: true }));
+              assert.equal(expected, actual);
               done();
             });
             it(`Renders ${component} for ${framework} as required`, (done) => {
@@ -57,7 +63,9 @@ describe('Rendering Tests', () => {
                 template: framework,
               });
               fixComponent(instance);
-              assert.equal(renders[`component-${framework}-${component}-required`], pretty(instance.render(), { ocd: true }));
+              const expected = normalizeLineEndings(renders[`component-${framework}-${component}-required`]);
+              const actual = normalizeLineEndings(pretty(instance.render(), { ocd: true }));
+              assert.equal(expected, actual);
               done();
             });
             it(`Renders ${component} for ${framework} as multiple`, (done) => {
@@ -67,7 +75,9 @@ describe('Rendering Tests', () => {
                 template: framework,
               });
               fixComponent(instance);
-              assert.equal(pretty(renders[`component-${framework}-${component}-multiple`]), pretty(instance.render(), { ocd: true }));
+              const expected = normalizeLineEndings(pretty(renders[`component-${framework}-${component}-multiple`]));
+              const actual = normalizeLineEndings(pretty(instance.render(), { ocd: true }));
+              assert.equal(expected, actual);
               done();
             });
 
@@ -85,7 +95,9 @@ describe('Rendering Tests', () => {
                   });
                   instance.dataValue = value;
                   fixComponent(instance);
-                  assert.equal(renders[`component-${framework}-${component}-html-value${index}`], pretty(instance.render(), { ocd: true }));
+                  const expected = normalizeLineEndings(renders[`component-${framework}-${component}-html-value${index}`]);
+                  const actual = normalizeLineEndings(pretty(instance.render(), { ocd: true }));
+                  assert.equal(expected, actual);
                   done();
                 });
                 it(`Renders ${component} for ${framework} value ${index} as string`, (done) => {
@@ -95,13 +107,13 @@ describe('Rendering Tests', () => {
                     renderMode: 'html',
                   });
                   fixComponent(instance);
-                  const file = renders[`component-${framework}-${component}-string-value${index}`];
-                  const val = instance.getValueAsString(value);
+                  const file = normalizeLineEndings(renders[`component-${framework}-${component}-string-value${index}`]);
+                  const val = normalizeLineEndings(pretty(instance.getValueAsString(value), { ocd: true }));
 
                   if (val !== file) {
                     console.log('er');
                   }
-                  assert.equal(renders[`component-${framework}-${component}-string-value${index}`], pretty(instance.getValueAsString(value), { ocd: true }));
+                  assert.equal(file, val);
                   done();
                 });
               });

test/unit/fixtures/panel/comp3.js

@@ -18,7 +18,6 @@ export default {
       "components": [
         {
           "collapsible": false,
-          "hideLabel": true,
           "dataGridLabel": true,
           "key": "panel",
           "type": "panel",