fix: formdata is not updating when options populated dynamically

package.json

@@ -74,4 +74,4 @@
     "typescript": "catalog:"
   },
   "packageManager": "[email protected]"
-}
+}

packages/demo/src/examples/example08.html

@@ -63,4 +63,24 @@ <h2 class="bd-title">
       <select id="group" class="full-width" multiple></select>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2">Single Select With Form</label>
+
+    <div class="col-sm-10">
+      <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>
 </div>

packages/demo/src/examples/example08.ts

@@ -6,6 +6,8 @@ export default class Example {
   ms3?: MultipleSelectInstance;
   ms4?: MultipleSelectInstance;
   ms5?: MultipleSelectInstance;
+  ms6?: MultipleSelectInstance;
+  ms7?: MultipleSelectInstance;
 
   mount() {
     this.ms1 = multipleSelect('#basic', {
@@ -157,6 +159,42 @@ export default class Example {
         },
       ],
     }) as MultipleSelectInstance;
+
+    this.ms6 = multipleSelect('#single-form', {
+      dataTest: 'select6',
+      data: [
+        {
+          text: 'June',
+          value: 6,
+        },
+        {
+          text: 'July',
+          value: 7,
+        },
+        {
+          text: 'August',
+          value: 8,
+        },
+      ],
+    }) 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() {
@@ -166,10 +204,14 @@ export default class Example {
     this.ms3?.destroy();
     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,37 @@ 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) => {
+      if (it.type === 'optgroup') {
+        const optgroup = document.createElement('optgroup');
+        optgroup.label = (it as OptGroupRowData).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 +1271,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 +1582,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

@@ -43,4 +43,33 @@ test.describe('Example 08 - Data Property', () => {
     await page.getByRole('option', { name: 'Group 1' }).click();
     await page.getByRole('button', { name: '11 of 12 selected' }).click();
   });
+
+  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('form1');
+      const formData = new FormData(form);
+      return formData.get('select6');
+    })
+
+    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"]);
+  });
 });