Add options (and optgroups) when select built not from html

Author: caulfield

packages/demo/src/examples/example08.html

@@ -65,11 +65,21 @@ <h2 class="bd-title">
   </div>
 
   <div class="mb-3 row">
-    <label class="col-sm-2">With Form</label>
+    <label class="col-sm-2">Single Select With Form</label>
 
     <div class="col-sm-10">
-      <form id="form">
-        <select name="select6" id="withform" class="full-width"></select>
+      <form id="form1">
+        <select name="select6" id="single-form" class="full-width"></select>
+      </form>
+    </div>
+  </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2">Multiple Select With Form</label>
+
+    <div class="col-sm-10">
+      <form id="form2">
+        <select name="select7" id="multiple-form" class="full-width" multiple></select>
       </form>
     </div>
   </div>

packages/demo/src/examples/example08.ts

@@ -159,7 +159,7 @@ export default class Example {
       ],
     }) as MultipleSelectInstance;
 
-    this.ms6 = multipleSelect('#withform', {
+    this.ms6 = multipleSelect('#single-form', {
       dataTest: 'select6',
       data: [
         {
@@ -176,6 +176,24 @@ export default class Example {
         },
       ],
     }) as MultipleSelectInstance;
+
+    this.ms7 = multipleSelect('#multiple-form', {
+      dataTest: 'select7',
+      data: [
+        {
+          text: 'June',
+          value: 6,
+        },
+        {
+          text: 'July',
+          value: 7,
+        },
+        {
+          text: 'August',
+          value: 8,
+        },
+      ],
+    }) as MultipleSelectInstance;
   }
 
   unmount() {
@@ -186,11 +204,13 @@ export default class Example {
     this.ms4?.destroy();
     this.ms5?.destroy();
     this.ms6?.destroy();
+    this.ms7?.destroy();
     this.ms1 = undefined;
     this.ms2 = undefined;
     this.ms3 = undefined;
     this.ms4 = undefined;
     this.ms5 = undefined;
     this.ms6 = undefined;
+    this.ms7 = undefined;
   }
 }

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -335,9 +335,38 @@ export class MultipleSelectInstance {
       this.data = this.data.sort(this.options.preSort);
     }
 
+    if (!this.fromHtml) {
+      this.initHtmlRows();
+    }
+
     this.dataTotal = setDataKeys(this.data || []);
   }
 
+  protected initHtmlRows() {
+    this.elm.innerHTML = '';
+    if (!this.data) return
+    this.data.forEach((it: OptGroupRowData | OptionRowData) => {
+      console.log({ it })
+      if (it.type == 'optgroup') {
+        const optgroup = document.createElement('optgroup');
+        optgroup.label = it.label;
+        (it as OptGroupRowData).children.forEach((opt: OptionRowData) => {
+          this.buildOption(optgroup, opt);
+        })
+        this.elm.appendChild(optgroup);
+      } else {
+        this.buildOption(this.elm, (it as OptionRowData));
+      }
+    });
+  }
+
+  protected buildOption(parent: HTMLElement, it: OptionRowData) {
+    const option = document.createElement('option');
+    option.value = it.value.toString();
+    option.text = it.text;
+    parent.appendChild(option);
+  }
+
   protected initRow(elm: HTMLOptionElement, groupDisabled?: boolean) {
     const row = {} as OptionRowData | OptGroupRowData;
     if (elm.tagName?.toLowerCase() === 'option') {
@@ -1243,6 +1272,7 @@ export class MultipleSelectInstance {
       isLazyProcess = true;
       this.dropElm?.querySelector('ul.ms-list')?.remove();
       this.options.lazyData().then(data => {
+        this.fromHtml = false;
         // when data is ready, remove spinner & update dropdown and selection
         this.options.data = data;
         this._isLazyLoaded = true;
@@ -1553,7 +1583,7 @@ export class MultipleSelectInstance {
     } else {
       // when multiple values could be set, we need to loop through each
       Array.from(this.elm.options).forEach(option => {
-        option.selected = selectedValues.some(val => val === option.value);
+        option.selected = selectedValues.some(val => val.toString() === option.value);
       });
     }
 

playwright/e2e/example08.spec.ts

@@ -44,17 +44,32 @@ test.describe('Example 08 - Data Property', () => {
     await page.getByRole('button', { name: '11 of 12 selected' }).click();
   });
 
-  test('formdata should be updated after select', async({ page }) => {
+  test('formdata should be updated after select for regular select', async({ page }) => {
     await page.goto('#/example08');
     await page.locator('div[data-test=select6].ms-parent').click();
     await page.getByRole('option', { name: 'July' }).click();
 
     const selectedItemValue = await page.evaluate(() => {
-      const form = document.getElementById('form');
+      const form = document.getElementById('form1');
       const formData = new FormData(form);
-      return formData.get('select6')
+      return formData.get('select6');
     })
 
-    expect(selectedItemValue).toBe(7)
+    expect(selectedItemValue).toBe("7");
+  });
+
+  test('formdata should be updated after select for multiple select', async({ page }) => {
+    await page.goto('#/example08');
+    await page.locator('div[data-test=select7].ms-parent').click();
+    await page.getByRole('option', { name: 'July' }).click();
+    await page.getByRole('option', { name: 'August' }).click();
+
+    const selectedItemValue = await page.evaluate(() => {
+      const form = document.getElementById('form2');
+      const formData = new FormData(form);
+      return formData.getAll('select7');
+    })
+
+    expect(selectedItemValue).toEqual(["7", "8"]);
   });
 });