fix: calling ms() twice should only create 1 instance, also fix destroy

- calling the same multipleSelect('select') shouldn't duplicate DOM Elements neither instances
- also fix instance destroy & add unmount with destroy on all demo examples and validate that no detached DOM elements remained

demo/src/events/events.ts

@@ -1,11 +1,12 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
   logElm!: HTMLTextAreaElement;
+  ms1?: MultipleSelectInstance;
 
   mount() {
     this.logElm = document.querySelector('textarea') as HTMLTextAreaElement;
-    multipleSelect('select', {
+    this.ms1 = multipleSelect('select', {
       filter: true,
       onOpen: () => {
         this.log('onOpen event fire!\n');
@@ -37,11 +38,17 @@ export default class Example {
       onAfterCreate: () => {
         this.log('onAfterCreate event fire!\n');
       },
-    });
+    }) as MultipleSelectInstance;
   }
 
   log(text: string) {
     this.logElm.textContent += text;
     this.logElm.scrollTo(0, this.logElm.scrollHeight);
   }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms1 = undefined;
+  }
 }

demo/src/examples/example01.html

@@ -8,7 +8,7 @@ <h2 class="bd-title">Single Select</h2>
 
 <div>
   <div class="mb-3 row">
-    <label class="col-sm-2"> Basic Select </label>
+    <label class="col-sm-2">Basic Select</label>
 
     <div class="col-sm-10">
       <select class="full-width">
@@ -21,7 +21,7 @@ <h2 class="bd-title">Single Select</h2>
   </div>
 
   <div class="mb-3 row">
-    <label class="col-sm-2"> Multiple Select </label>
+    <label class="col-sm-2">Multiple Select</label>
 
     <div class="col-sm-10">
       <select class="multiple-select full-width">
@@ -82,12 +82,4 @@ <h2 class="bd-title">Single Select</h2>
       </select>
     </div>
   </div>
-
-  <div class="mb-3 row">
-    <pre>
-        <code>
-
-        </code>
-    </pre>
-  </div>
 </div>

demo/src/examples/example01.ts

@@ -1,7 +1,15 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  ms: MultipleSelectInstance[] = [];
+
   mount() {
-    multipleSelect('.multiple-select');
+    this.ms = multipleSelect('.multiple-select') as MultipleSelectInstance[];
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms.forEach((m) => m.destroy());
+    this.ms = [];
   }
 }

demo/src/examples/example02.ts

@@ -1,7 +1,15 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  ms: MultipleSelectInstance[] = [];
+
   mount() {
-    multipleSelect('.multiple-select');
+    this.ms = multipleSelect('.multiple-select') as MultipleSelectInstance[];
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms.forEach((m) => m.destroy());
+    this.ms = [];
   }
 }

demo/src/examples/example03.ts

@@ -1,10 +1,18 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  ms: MultipleSelectInstance[] = [];
+
   mount() {
-    multipleSelect('select', {
+    this.ms = multipleSelect('select', {
       multiple: true,
       multipleWidth: 60,
-    });
+    }) as MultipleSelectInstance[];
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms.forEach((m) => m.destroy());
+    this.ms = [];
   }
 }

demo/src/examples/example04.ts

@@ -1,9 +1,12 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  multiMs: MultipleSelectInstance[] = [];
+  singleMs?: MultipleSelectInstance;
+
   mount() {
-    multipleSelect('.select');
-    multipleSelect('.data', {
+    this.multiMs = multipleSelect('.select') as MultipleSelectInstance[];
+    this.singleMs = multipleSelect('.data', {
       data: [
         {
           value: 1,
@@ -19,6 +22,14 @@ export default class Example {
           text: 'Options 3',
         },
       ],
-    });
+    }) as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.multiMs.forEach((m) => m.destroy());
+    this.multiMs = [];
+    this.singleMs?.destroy();
+    this.singleMs = undefined;
   }
 }

demo/src/examples/example05.ts

@@ -1,7 +1,15 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  ms1?: MultipleSelectInstance;
+
   mount() {
-    multipleSelect('select');
+    this.ms1 = multipleSelect('select') as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms1 = undefined;
   }
 }

demo/src/examples/example06.ts

@@ -1,7 +1,15 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  ms: MultipleSelectInstance[] = [];
+
   mount() {
-    multipleSelect('select');
+    this.ms = multipleSelect('select') as MultipleSelectInstance[];
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms.forEach((m) => m.destroy());
+    this.ms = [];
   }
 }

demo/src/examples/example07.ts

@@ -1,15 +1,21 @@
-import { MultipleSelect, multipleSelect } from 'multiple-select-vanilla';
+import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
 
 export default class Example {
-  ms: MultipleSelect[] = [];
+  btnElm?: HTMLButtonElement | null;
+  ms: MultipleSelectInstance[] = [];
 
   mount() {
-    this.ms = multipleSelect('select') as MultipleSelect[];
-    document.querySelector('.submit7')!.addEventListener('click', this.clickListener);
+    this.ms = multipleSelect('select') as MultipleSelectInstance[];
+    this.btnElm = document.querySelector('.submit7');
+    this.btnElm!.addEventListener('click', this.clickListener);
   }
 
   unmount() {
-    document.querySelector('.submit7')!.removeEventListener('click', this.clickListener);
+    this.btnElm!.removeEventListener('click', this.clickListener);
+
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms.forEach((m) => m.destroy());
+    this.ms = [];
   }
 
   clickListener = () => {

demo/src/examples/example08.ts

@@ -1,8 +1,14 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  ms1?: MultipleSelectInstance;
+  ms2?: MultipleSelectInstance;
+  ms3?: MultipleSelectInstance;
+  ms4?: MultipleSelectInstance;
+  ms5?: MultipleSelectInstance;
+
   mount() {
-    multipleSelect('#basic', {
+    this.ms1 = multipleSelect('#basic', {
       data: [
         {
           text: 'January',
@@ -53,9 +59,9 @@ export default class Example {
           value: 12,
         },
       ],
-    });
+    }) as MultipleSelectInstance;
 
-    multipleSelect('#object', {
+    this.ms2 = multipleSelect('#object', {
       data: {
         1: 'January',
         2: 'February',
@@ -70,17 +76,17 @@ export default class Example {
         11: 'November',
         12: 'December',
       },
-    });
+    }) as MultipleSelectInstance;
 
-    multipleSelect('#string', {
+    this.ms3 = multipleSelect('#string', {
       data: ['January', 'February', 'March'],
-    });
+    }) as MultipleSelectInstance;
 
-    multipleSelect('#number', {
+    this.ms4 = multipleSelect('#number', {
       data: [1, 2, 3],
-    });
+    }) as MultipleSelectInstance;
 
-    multipleSelect('#group', {
+    this.ms5 = multipleSelect('#group', {
       data: [
         {
           type: 'optgroup',
@@ -145,6 +151,20 @@ export default class Example {
           ],
         },
       ],
-    });
+    }) as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms2?.destroy();
+    this.ms3?.destroy();
+    this.ms4?.destroy();
+    this.ms5?.destroy();
+    this.ms1 = undefined;
+    this.ms2 = undefined;
+    this.ms3 = undefined;
+    this.ms4 = undefined;
+    this.ms5 = undefined;
   }
 }

demo/src/examples/example09.ts

@@ -1,21 +1,29 @@
-import { MultipleSelect, multipleSelect } from 'multiple-select-vanilla';
+import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
 
 export default class Example {
-  ms1!: MultipleSelect;
-  ms2!: MultipleSelect;
+  ms1?: MultipleSelectInstance;
+  ms2?: MultipleSelectInstance;
 
   mount() {
     const elm = document.querySelector('#locale') as HTMLSelectElement;
     elm.addEventListener('change', ((event: KeyboardEvent & { target: HTMLSelectElement }) => {
       this.updateLocale(event.target.value);
     }) as EventListener);
 
-    this.ms1 = multipleSelect(elm) as MultipleSelect;
-    this.ms2 = multipleSelect('#select') as MultipleSelect;
+    this.ms1 = multipleSelect(elm) as MultipleSelectInstance;
+    this.ms2 = multipleSelect('#select') as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms2?.destroy();
+    this.ms1 = undefined;
+    this.ms2 = undefined;
   }
 
   updateLocale(locale: string) {
-    this.ms2.destroy();
-    this.ms2.refreshOptions({ locale });
+    this.ms2?.destroy();
+    this.ms2?.refreshOptions({ locale });
   }
 }

demo/src/examples/example10.ts

@@ -1,19 +1,23 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 
 export default class Example {
+  ms1?: MultipleSelectInstance;
+
   mount() {
     var data = [];
     for (var i = 0; i < 10000; i++) {
-      data.push({ value: i, text: i });
-      // data.push(i);
+      data.push(i);
     }
 
-    multipleSelect('#select', {
+    this.ms1 = multipleSelect('#select', {
       filter: true,
-      // single: true,
-      // singleRadio: true,
-      // filterAcceptOnEnter: true,
       data,
-    });
+    }) as MultipleSelectInstance;
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms1?.destroy();
+    this.ms1 = undefined;
   }
 }

demo/src/examples/example11.ts

@@ -1,9 +1,17 @@
-import { multipleSelect } from 'multiple-select-vanilla';
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
 // import 'multiple-select-vanilla/dist/styles/css/themes/bootstrap.css';
 import './example11.scss';
 
 export default class Example {
+  ms: MultipleSelectInstance[] = [];
+
   mount() {
-    multipleSelect('select');
+    this.ms = multipleSelect('select') as MultipleSelectInstance[];
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.ms.forEach((m) => m.destroy());
+    this.ms = [];
   }
 }