fix: formdata is not updating when options populated dynamically

Author: caulfield

packages/demo/src/examples/example01.html

@@ -39,12 +39,14 @@ <h2 class="bd-title">
     <label class="col-sm-2">Multiple Select</label>
 
     <div class="col-sm-10">
-      <select class="multiple-select full-width" data-test="select1">
-        <option value="1">First</option>
-        <option value="2">Second</option>
-        <option value="3">Third</option>
-        <option value="4">Fourth</option>
-      </select>
+      <form id="form">
+        <select name="select1" class="multiple-select full-width" data-test="select1">
+          <option value="1">First</option>
+          <option value="2">Second</option>
+          <option value="3">Third</option>
+          <option value="4">Fourth</option>
+        </select>
+      </form>
     </div>
   </div>
 

packages/demo/src/examples/example08.html

@@ -63,4 +63,14 @@ <h2 class="bd-title">
       <select id="group" class="full-width" multiple></select>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2">With Form</label>
+
+    <div class="col-sm-10">
+      <form id="form">
+        <select name="select6" id="withform" class="full-width"></select>
+      </form>
+    </div>
+  </div>
 </div>

packages/demo/src/examples/example08.ts

@@ -6,6 +6,7 @@ export default class Example {
   ms3?: MultipleSelectInstance;
   ms4?: MultipleSelectInstance;
   ms5?: MultipleSelectInstance;
+  ms6?: MultipleSelectInstance;
 
   mount() {
     this.ms1 = multipleSelect('#basic', {
@@ -157,6 +158,24 @@ export default class Example {
         },
       ],
     }) as MultipleSelectInstance;
+
+    this.ms6 = multipleSelect('#withform', {
+      dataTest: 'select6',
+      data: [
+        {
+          text: 'June',
+          value: 6,
+        },
+        {
+          text: 'July',
+          value: 7,
+        },
+        {
+          text: 'August',
+          value: 8,
+        },
+      ],
+    }) as MultipleSelectInstance;
   }
 
   unmount() {
@@ -166,10 +185,12 @@ export default class Example {
     this.ms3?.destroy();
     this.ms4?.destroy();
     this.ms5?.destroy();
+    this.ms6?.destroy();
     this.ms1 = undefined;
     this.ms2 = undefined;
     this.ms3 = undefined;
     this.ms4 = undefined;
     this.ms5 = undefined;
+    this.ms6 = undefined;
   }
 }

playwright/e2e/example08.spec.ts

@@ -43,4 +43,18 @@ 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', 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 formData = new FormData(form);
+      return formData.get('select6')
+    })
+
+    expect(selectedItemValue).toBe(7)
+  });
 });