fix: previous values should not be reused as selected values (#121)

* fix: previous values should not be reused as selected values

* chore: add more E2E tests to cover the bug fix

Author: ghiscoding

demo/src/getting-started.html

@@ -18,17 +18,17 @@ <h5>GitHub <i class="fa fa-link"></i></h5>
   <section>
     <h5>CDN</h5>
     <p>
-      <a href="https://www.jsdelivr.com/" target="__blank">jsDelivr</a> graciously provide CDNs for many JavaScript libraries including Multiple-Select-Vanilla. Just use
-      the following CDN links.
+      <a href="https://www.jsdelivr.com/" target="__blank">jsDelivr</a> graciously provide CDNs for many JavaScript libraries
+      including Multiple-Select-Vanilla. Just use the following CDN links.
     </p>
 
     <div style="background: #f7f7f7; padding: 10px">
       <pre>
 &lt;!-- Latest compiled and minified CSS --&gt;
-&lt;link href=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected].5/dist/styles/css/multiple-select.css</span>&quot; rel=&quot;<span style="color:#880000">stylesheet</span>&quot;&gt;
+&lt;link href=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected].9/dist/styles/css/multiple-select.css</span>&quot; rel=&quot;<span style="color:#880000">stylesheet</span>&quot;&gt;
 
 &lt;!-- Latest compiled and minified JavaScript --&gt;
-&lt;script src=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected].5/dist/multiple-select.js</span>&quot;&gt;&lt;/script&gt;</pre>
+&lt;script src=&quot;<span style="color:#880000">https://cdn.jsdelivr.net/npm/[email protected].9/dist/multiple-select.js</span>&quot;&gt;&lt;/script&gt;</pre>
     </div>
   </section>
 

lib/src/MultipleSelectInstance.ts

@@ -969,15 +969,9 @@ export class MultipleSelectInstance {
       this.elm.value = selectedValues.length ? selectedValues[0] : '';
     } else {
       // when multiple values could be set, we need to loop through each
-      const selectOptions = this.elm.options;
-      for (let i = 0, ln = selectOptions.length; i < ln; i++) {
-        for (const selectedVal of selectedValues) {
-          const isSelected = selectedVal === selectOptions[i].value;
-          if (isSelected) {
-            selectOptions[i].selected = isSelected;
-          }
-        }
-      }
+      Array.from(this.elm.options).forEach((option) => {
+        option.selected = selectedValues.some((val) => val === option.value);
+      });
     }
 
     // trigger <select> change event

playwright/e2e/example07.spec.ts

@@ -31,5 +31,15 @@ test.describe('Example 07 - Submit Data', () => {
     await page.getByRole('button', { name: 'Third, Fourth' }).click();
     await page.getByTestId('submit').click();
     await expect(dialogText).toBe('select1=1&select2=3&select2=4');
+
+    // unselect 3,4 and select 1,2 instead
+    await page.locator('[data-test=select2].ms-parent').click();
+    await page.getByRole('listitem').filter({ hasText: 'Third' }).locator('span').click();
+    await page.getByRole('listitem').filter({ hasText: 'Fourth' }).locator('span').click();
+    await page.getByRole('listitem').filter({ hasText: 'First' }).locator('span').click();
+    await page.getByRole('listitem').filter({ hasText: 'Second' }).locator('span').click();
+    await page.locator('[data-test=select2].ms-parent').click();
+    await page.getByTestId('submit').click();
+    await expect(dialogText).toBe('select1=1&select2=1&select2=2');
   });
 });