fix: multiple fixes identified after adding it to external project

 fixes multiple bugs found after implementing it into Slickgrid-Universal:
 - `setSelects` should work even after creating a new multiple-select dynamically from an empty select DOM element and providing an array to the `data` property
 - ms-drop DOM element should also be able to add a `name` attribute when its `name` option is provided
 - locale aren't loaded asynchronously anymore and shouldn't be either because that was causing the ms instance to longer be synchronous when it should
 - tooltip title values should be displayed with proper delimiter when provided
 - add new `minHeight` option since we already have a `maxHeight` option

demo/src/app-routing.ts

@@ -11,6 +11,7 @@ import Example09 from './examples/example09';
 import Example10 from './examples/example10';
 import Example11 from './examples/example11';
 import Example12 from './examples/example12';
+import Example13 from './examples/example13';
 import Options01 from './options/options01';
 import Options02 from './options/options02';
 import Options03 from './options/options03';
@@ -78,6 +79,7 @@ export const exampleRouting = [
       { name: 'example10', view: '/src/examples/example10.html', viewModel: Example10, title: 'Large Select' },
       { name: 'example11', view: '/src/examples/example11.html', viewModel: Example11, title: 'The Themes' },
       { name: 'example12', view: '/src/examples/example12.html', viewModel: Example12, title: 'Checkbox/Radio Icons' },
+      { name: 'example13', view: '/src/examples/example13.html', viewModel: Example13, title: 'Dynamically Create Select' },
     ],
   },
   {

demo/src/examples/example13.html

@@ -0,0 +1,44 @@
+<div class="row mb-2">
+  <div class="col-md-12 title-desc">
+    <h2 class="bd-title">
+      Dynamically create Multiple-Select with Data collection
+      <span class="float-end links">
+        Code <span class="fa fa-link"></span>
+        <span class="small">
+          <a
+            target="_blank"
+            href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.html"
+            >html</a
+          >
+          |
+          <a target="_blank" href="https://github.com/ghiscoding/multiple-select-vanilla/blob/main/demo/src/options/options08.ts"
+            >ts</a
+          >
+        </span>
+      </span>
+    </h2>
+    <div class="demo-subtitle">
+      Dynamically create a Multiple-Select instance with <code>data</code> property.
+      <br />
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="mb-3 row">
+    <label class="col-sm-2"> Create </label>
+
+    <div class="col-sm-10">
+      <button id="destroyBtn" class="btn btn-danger btn-sm">Destroy</button>
+      <button id="createBtn" class="btn btn-primary btn-sm">Dynamically Create</button>
+    </div>
+  </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-3 text-end">Use Select Option Label & Render HTML</label>
+
+    <div class="col-sm-9">
+      <select id="select1" class="full-width"></select>
+    </div>
+  </div>
+</div>

demo/src/examples/example13.ts

@@ -0,0 +1,87 @@
+import { multipleSelect, MultipleSelectInstance } from 'multiple-select-vanilla';
+
+export default class Example {
+  createBtnElm?: HTMLButtonElement | null;
+  destroyBtnElm?: HTMLButtonElement | null;
+  ms1?: MultipleSelectInstance;
+
+  mount() {
+    this.createBtnElm = document.querySelector('#createBtn');
+    this.destroyBtnElm = document.querySelector('#destroyBtn');
+    this.createBtnElm!.addEventListener('click', this.createMultipleSelect.bind(this));
+    this.destroyBtnElm!.addEventListener('click', this.destroyMultiSelect.bind(this));
+  }
+
+  createMultipleSelect() {
+    this.ms1 = multipleSelect('#select1', {
+      name: 'my-select',
+      single: false,
+      useSelectOptionLabelToHtml: true,
+      data: [
+        {
+          text: '<i class="fa fa-star"></i> January',
+          value: 1,
+        },
+        {
+          text: 'February',
+          value: 2,
+        },
+        {
+          text: 'March',
+          value: 3,
+        },
+        {
+          text: 'April',
+          value: 4,
+        },
+        {
+          text: 'May',
+          value: 5,
+        },
+        {
+          text: 'June',
+          value: 6,
+        },
+        {
+          text: 'July',
+          value: 7,
+        },
+        {
+          text: 'August',
+          value: 8,
+        },
+        {
+          text: 'September',
+          value: 9,
+        },
+        {
+          text: 'October',
+          value: 10,
+        },
+        {
+          text: 'November',
+          value: 11,
+        },
+        {
+          text: 'December',
+          value: 12,
+        },
+      ],
+    }) as MultipleSelectInstance;
+
+    this.ms1.setSelects([1, 3, 4]);
+  }
+
+  destroyMultiSelect() {
+    console.log('destroy');
+    this.ms1?.destroy();
+    this.ms1 = undefined; // remove detached element
+  }
+
+  unmount() {
+    // destroy ms instance(s) to avoid DOM leaks
+    this.destroyMultiSelect();
+    this.createBtnElm!.removeEventListener('click', this.createMultipleSelect.bind(this));
+    this.destroyBtnElm!.removeEventListener('click', this.destroyMultiSelect.bind(this));
+  }
+}

demo/src/methods/methods11.ts

@@ -1,24 +1,32 @@
 import { MultipleSelectInstance, multipleSelect } from 'multiple-select-vanilla';
 
 export default class Example {
+  buildBtnElm?: HTMLButtonElement | null;
+  destroyBtnElm?: HTMLButtonElement | null;
   ms1?: MultipleSelectInstance | null;
 
   mount() {
+    this.buildBtnElm = document.querySelector('#buildBtn');
+    this.destroyBtnElm = document.querySelector('#destroyBtn');
+    this.destroyBtnElm!.addEventListener('click', this.destroyMultiSelect.bind(this));
+    this.buildBtnElm!.addEventListener('click', this.createMultipleSelect.bind(this));
+
     this.ms1 = multipleSelect('select') as MultipleSelectInstance | null;
+  }
 
-    document.querySelector('#destroyBtn')!.addEventListener('click', () => {
-      this.ms1?.destroy();
-      this.ms1 = null; // remove detached element
-    });
+  createMultipleSelect() {
+    this.ms1 = multipleSelect('select') as MultipleSelectInstance;
+  }
 
-    document.querySelector('#buildBtn')!.addEventListener('click', () => {
-      this.ms1 = multipleSelect('select') as MultipleSelectInstance;
-    });
+  destroyMultiSelect() {
+    this.ms1?.destroy();
+    this.ms1 = null; // remove detached element
   }
 
   unmount() {
     // destroy ms instance(s) to avoid DOM leaks
-    this.ms1?.destroy();
-    this.ms1 = undefined;
+    this.destroyMultiSelect();
+    this.buildBtnElm!.removeEventListener('click', this.destroyMultiSelect.bind(this));
+    this.destroyBtnElm!.removeEventListener('click', this.createMultipleSelect.bind(this));
   }
 }

demo/src/options/options17.html

@@ -92,4 +92,27 @@ <h2 class="bd-title">
       </div>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-2"> Body Container </label>
+
+    <div class="col-sm-10">
+      <div class="parent" style="overflow: hidden">
+        <select multiple="multiple" class="select4 full-width">
+          <option value="1">January</option>
+          <option value="2">February</option>
+          <option value="3">March</option>
+          <option value="4">April</option>
+          <option value="5">May</option>
+          <option value="6">June</option>
+          <option value="7">July</option>
+          <option value="8">August</option>
+          <option value="9">September</option>
+          <option value="10">October</option>
+          <option value="11">November</option>
+          <option value="12">December</option>
+        </select>
+      </div>
+    </div>
+  </div>
 </div>

demo/src/options/options17.ts

@@ -4,20 +4,24 @@ export default class Example {
   ms1?: MultipleSelectInstance;
   ms2?: MultipleSelectInstance;
   ms3?: MultipleSelectInstance;
+  ms4?: MultipleSelectInstance;
 
   mount() {
     this.ms1 = multipleSelect('.select1') as MultipleSelectInstance;
     this.ms2 = multipleSelect('.select2') as MultipleSelectInstance;
     this.ms3 = multipleSelect('.select3', { container: '.my-container' }) as MultipleSelectInstance;
+    this.ms4 = multipleSelect('.select4', { autoAdjustDropPosition: true, container: 'body' }) as MultipleSelectInstance;
   }
 
   unmount() {
     // destroy ms instance(s) to avoid DOM leaks
     this.ms1?.destroy();
     this.ms2?.destroy();
     this.ms3?.destroy();
+    this.ms4?.destroy();
     this.ms1 = undefined;
     this.ms2 = undefined;
     this.ms3 = undefined;
+    this.ms4 = undefined;
   }
 }

lib/package.json

@@ -8,7 +8,8 @@
     ".": {
       "import": "./dist/esm/multiple-select.js",
       "require": "./dist/cjs/multiple-select.js",
-      "default": "./dist/esm/multiple-select.js"
+      "default": "./dist/esm/multiple-select.js",
+      "types": "./dist/types/index.d.ts"
     },
     "./*": "./*"
   },