create helpers + add example

Author: caulfield

packages/demo/src/examples/example07.html

@@ -29,7 +29,7 @@ <h2 class="bd-title">
       <label class="col-sm-2">Single Select </label>
 
       <div class="col-sm-10">
-        <select name="select1" class="full-width">
+        <select id="select1" name="select1" class="full-width">
           <option value="1">First</option>
           <option value="2">Second</option>
           <option value="3">Third</option>
@@ -42,7 +42,7 @@ <h2 class="bd-title">
       <label class="col-sm-2">Multiple Select </label>
 
       <div class="col-sm-10">
-        <select name="select2" class="full-width" data-test="select2" multiple required>
+        <select id="select2" name="select2" class="full-width" data-test="select2" multiple required>
           <option value="1">First</option>
           <option value="2">Second</option>
           <option value="3">Third</option>
@@ -51,6 +51,15 @@ <h2 class="bd-title">
       </div>
     </div>
 
+    <div class="mb-3 row">
+      <label class="col-sm-2">Select with dynamic options</label>
+
+      <div class="col-sm-10">
+        <select id="select3" name="select3" class="full-width" data-test="select3" required>
+        </select>
+      </div>
+    </div>
+
     <div class="mb-3 row">
       <div class="col-sm-10 offset-sm-2">
         <button type="button" class="btn btn-primary submit7" data-testid="submit">Submit</button>

packages/demo/src/examples/example07.ts

@@ -5,7 +5,14 @@ export default class Example {
   ms: MultipleSelectInstance[] = [];
 
   mount() {
-    this.ms = multipleSelect('select') as MultipleSelectInstance[];
+    this.ms = multipleSelect('#select1, #select2') as MultipleSelectInstance[];
+    this.ms3 = multipleSelect('#select3', {
+      lazyData: () => {
+        return new Promise(resolve => {
+          resolve({ '1': 'First', '2': 'Second', '3': 'Third', '4': 'Fourth', '5': 'Fifth'})
+        })
+      }
+    });
     this.btnElm = document.querySelector('.submit7');
     this.btnElm!.addEventListener('click', this.clickListener);
   }
@@ -16,6 +23,8 @@ export default class Example {
     // destroy ms instance(s) to avoid DOM leaks
     this.ms.forEach(m => m.destroy());
     this.ms = [];
+    this.ms3.destroy();
+    this.ms = undefined;
   }
 
   clickListener = () => {

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -13,6 +13,7 @@ import {
   classNameToList,
   convertItemRowToHtml,
   createDomElement,
+  createDomStructureFromData,
   emptyElement,
   findParent,
   getComputedSize,
@@ -336,7 +337,7 @@ export class MultipleSelectInstance {
     }
 
     if (!this.fromHtml) {
-      this.initHtmlRows();
+      // this.initHtmlRows();
     }
 
     this.dataTotal = setDataKeys(this.data || []);
@@ -345,25 +346,7 @@ export class MultipleSelectInstance {
   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);
+    return createDomStructureFromData(this.data, this.elm);
   }
 
   protected initRow(elm: HTMLOptionElement, groupDisabled?: boolean) {
@@ -1271,10 +1254,10 @@ 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;
+        this.fromHtml = false;
         this.dropElm?.querySelector('.ms-loading')?.remove();
         this.initData();
         this.initList(true);
@@ -1582,7 +1565,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.toString() === option.value);
+        option.selected = selectedValues.some(val => val().toString() === option.value);
       });
     }
 

packages/multiple-select-vanilla/src/utils/domUtils.ts

@@ -1,4 +1,4 @@
-import type { HtmlStruct, InferDOMType } from '../models/interfaces.js';
+import type { HtmlStruct, InferDOMType, OptGroupRowData, OptionRowData } from '../models/interfaces.js';
 import { isDefined, objectRemoveEmptyProps } from './utils.js';
 
 export interface HtmlElementPosition {
@@ -102,6 +102,36 @@ export function createDomStructure(item: HtmlStruct, appendToElm?: HTMLElement,
   return elm;
 }
 
+
+/**
+ * Create html node with optgroups and options from data
+ * @param data - array of options and/or optgroups
+ * @param parent - parent element to append to
+ * @return {object} element - updated element
+ */
+export function createDomStructureFromData(data: Array<OptGroupRowData | OptionRowData>, parent: HTMLElement): HTMLElement {
+  data.forEach(row => {
+    if (row.type === 'optgroup') {
+      const optgroup = createDomElement('optgroup', { label: (row as OptGroupRowData).label }, parent);
+      if ((row as OptGroupRowData).children) {
+        createDomStructureFromData((row as OptGroupRowData).children, optgroup);
+      }
+    } else {
+      const optionProps: any = {
+        value: row.value,
+        disabled: row.disabled || false,
+        selected: row.selected || false
+      };
+      if (row.classes) {
+        optionProps.className = row.classes;
+      }
+      const option = createDomElement('option', optionProps, parent);
+      option.textContent = (row as OptionRowData).text;
+    }
+  });
+  return parent;
+}
+
 /** takes an html block object and converts to a real HTMLElement */
 export function convertItemRowToHtml(item: HtmlStruct): HTMLElement {
   if (item.hasOwnProperty('tagName')) {