fix: data collection shouldn't render label as html by default (#86)

- when using `data` option to provide a collection of data, we should only render when `renderOptionLabelAsHtml` or `useSelectOptionLabelToHtml` is enabled, otherwise we should display same text input (html encoded instead of being rendered as html)

Co-authored-by: ghiscoding <[email protected]>

Author: ghiscoding

demo/src/options/options27.html

@@ -26,10 +26,19 @@ <h2 class="bd-title">
 
 <div>
   <div class="mb-3 row">
-    <label class="col-sm-2"> Basic Select </label>
+    <label class="col-sm-4">Enable/Disable <code>renderOptionLabelAsHtml</code> option</label>
 
-    <div class="col-sm-10">
-      <select multiple="multiple" class="full-width">
+    <div class="col-sm-8">
+      <button id="enableRenderHtml" class="btn btn-primary">Enable renderOptionLabelAsHtml</button>
+      <button id="disableRenderHtml" class="btn btn-secondary">Disable renderOptionLabelAsHtml</button>
+    </div>
+  </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-4">Basic Select</label>
+
+    <div class="col-sm-8">
+      <select id="basic" data-test="select1" multiple="multiple" class="full-width">
         <option value="1">January</option>
         <option value="2">February</option>
         <option value="3">March</option>
@@ -45,4 +54,13 @@ <h2 class="bd-title">
       </select>
     </div>
   </div>
+
+  <div class="mb-3 row">
+    <label class="col-sm-4">From Data</label>
+
+    <div class="col-sm-8">
+      <select id="from-data" data-test="select2" class="full-width" multiple></select>
+      </select>
+    </div>
+  </div>
 </div>

demo/src/options/options27.ts

@@ -2,10 +2,14 @@ import { multipleSelect, MultipleSelectInstance, TextFilter } from 'multiple-sel
 
 export default class Example {
   ms1?: MultipleSelectInstance;
+  ms2?: MultipleSelectInstance;
+  btnEnableElm?: HTMLButtonElement | null;
+  btnDisableElm?: HTMLButtonElement | null;
 
   mount() {
-    this.ms1 = multipleSelect('select', {
+    this.ms1 = multipleSelect('#basic', {
       filter: true,
+      displayTitle: true,
       renderOptionLabelAsHtml: true, // without this flag, html code will be showing as plain text
       textTemplate: (el) => {
         return `<i class="fa fa-star"></i>${el.innerHTML}`;
@@ -17,11 +21,37 @@ export default class Example {
         return divElm.textContent?.includes(search) ?? true;
       },
     }) as MultipleSelectInstance;
+
+    this.ms2 = multipleSelect('#from-data', {
+      dataTest: 'select1',
+      displayTitle: true,
+      renderOptionLabelAsHtml: true,
+      data: [
+        { value: `50"`, text: `50"` },
+        { value: `44'`, text: `44'` },
+        { value: `33`, text: `<span style="font-weight:bold">33</span>` },
+      ],
+    }) as MultipleSelectInstance;
+
+    this.btnEnableElm = document.querySelector('#enableRenderHtml') as HTMLButtonElement;
+    this.btnEnableElm.addEventListener('click', () => this.renderAsHtmlHandler(true));
+
+    this.btnDisableElm = document.querySelector('#disableRenderHtml') as HTMLButtonElement;
+    this.btnDisableElm.addEventListener('click', () => this.renderAsHtmlHandler(false));
+  }
+
+  renderAsHtmlHandler(enabled: boolean) {
+    this.ms1?.refreshOptions({ renderOptionLabelAsHtml: enabled });
+    this.ms2?.refreshOptions({ renderOptionLabelAsHtml: enabled });
   }
 
   unmount() {
     // destroy ms instance(s) to avoid DOM leaks
     this.ms1?.destroy();
+    this.ms2?.destroy();
     this.ms1 = undefined;
+    this.ms2 = undefined;
+    this.btnEnableElm?.removeEventListener('click', () => this.renderAsHtmlHandler(true));
+    this.btnDisableElm?.removeEventListener('click', () => this.renderAsHtmlHandler(false));
   }
 }

lib/src/MultipleSelectInstance.ts

@@ -9,6 +9,7 @@ import {
   findParent,
   getElementOffset,
   getElementSize,
+  htmlEncode,
   insertAfter,
   toggleElement,
 } from './utils/domUtils';
@@ -482,6 +483,7 @@ export class MultipleSelectInstance {
   }
 
   protected initListItem(row: any, level = 0) {
+    const isRenderAsHtml = this.options.renderOptionLabelAsHtml || this.options.useSelectOptionLabelToHtml;
     const title = row?.title ? `title="${row.title}"` : '';
     const multiple = this.options.multiple ? 'multiple' : '';
     const type = this.options.single ? 'radio' : 'checkbox';
@@ -522,7 +524,7 @@ export class MultipleSelectInstance {
       html.push(`
         <li class="${`group ${classes}`.trim()}" ${style}>
         <label class="optgroup${this.options.single || row.disabled ? ' disabled' : ''}">
-        ${group}${row.label}
+        ${group}${isRenderAsHtml ? row.label : htmlEncode(row.label)}
         </label>
         </li>
       `);
@@ -557,7 +559,7 @@ export class MultipleSelectInstance {
         ${row.selected ? ' checked="checked"' : ''}
         ${row.disabled ? ' disabled="disabled"' : ''}
       >
-      <span>${row.text}</span>
+      <span>${isRenderAsHtml ? row.text : htmlEncode(row.text)}</span>
       </label>
       </li>
     `,

lib/src/utils/domUtils.ts

@@ -169,6 +169,25 @@ export function insertAfter(referenceNode: HTMLElement, newNode: HTMLElement) {
   referenceNode.parentNode?.insertBefore(newNode, referenceNode.nextSibling);
 }
 
+/**
+ * HTML encode using a plain <div>
+ * Create a in-memory div, set it's inner text(which a div can encode)
+ * then grab the encoded contents back out.  The div never exists on the page.
+ * @param {String} inputValue - input value to be encoded
+ * @return {String}
+ */
+export function htmlEncode(inputValue: string): string {
+  const val = typeof inputValue === 'string' ? inputValue : String(inputValue);
+  const entityMap: { [char: string]: string } = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+  };
+  return (val || '').toString().replace(/[&<>"']/g, (s) => entityMap[s as keyof { [char: string]: string }]);
+}
+
 /** Display or hide matched element */
 export function toggleElement(elm?: HTMLElement | null, display?: boolean) {
   if (elm?.style) {

playwright/e2e/options27.spec.ts

@@ -2,23 +2,60 @@ import { test, expect } from '@playwright/test';
 
 test.describe('Options 27 - Text Template', () => {
   test('option labels & selected options shows as html', async ({ page }) => {
+    // ms-select #1
     await page.goto('#/options27');
-    await page.locator('.ms-parent').click();
-    const optionLoc1 = await page.locator('.ms-drop ul li').nth(0);
-    optionLoc1.click();
+    await page.locator('div[data-test=select1].ms-parent').click();
+    const optionLoc1 = await page.locator('div[data-test=select1] .ms-drop ul li').nth(0);
+    await optionLoc1.click();
     await expect(optionLoc1.locator('label span')).toHaveText('January');
     const spanLoc1 = await optionLoc1.locator('span').innerHTML();
     await expect(spanLoc1).toBe('<i class="fa fa-star"></i>January');
 
-    const optionLoc4 = await page.locator('.ms-drop ul li').nth(3);
-    optionLoc4.click();
-    await expect(optionLoc4.locator('label span')).toHaveText('April');
-    const spanLoc4 = await optionLoc4.locator('span').innerHTML();
-    await expect(spanLoc4).toBe('<i class="fa fa-star"></i>April');
+    const ms1OptionLoc4 = await page.locator('div[data-test=select1] .ms-drop ul li').nth(3);
+    await ms1OptionLoc4.click();
+    await expect(ms1OptionLoc4.locator('label span')).toHaveText('April');
+    const ms1SpanLoc4 = await ms1OptionLoc4.locator('span').innerHTML();
+    await expect(ms1SpanLoc4).toBe('<i class="fa fa-star"></i>April');
 
     await page.waitForTimeout(90);
-    await expect(page.locator('.ms-choice span')).toHaveText('January, April');
-    const parentSpanLoc = await page.locator('.ms-parent .ms-choice span').innerHTML();
-    await expect(parentSpanLoc).toBe('<i class="fa fa-star"></i>January, <i class="fa fa-star"></i>April');
+    await expect(page.locator('div[data-test=select1] .ms-choice span')).toHaveText('January, April');
+    let ms1ParentSpanLoc = await page.locator('div[data-test=select1].ms-parent .ms-choice span').innerHTML();
+    await expect(ms1ParentSpanLoc).toBe('<i class="fa fa-star"></i>January, <i class="fa fa-star"></i>April');
+
+    await page.locator('button#disableRenderHtml').click();
+    ms1ParentSpanLoc = (await page.locator('div[data-test=select1].ms-parent .ms-choice span').textContent()) as string;
+    await expect(ms1ParentSpanLoc).toBe('<i class="fa fa-star"></i>January, <i class="fa fa-star"></i>April');
+    await page.locator('div[data-test=select1].ms-parent').click();
+
+    // ms-select #2
+    await page.locator('div[data-test=select2].ms-parent').click();
+    const ms2OptionLoc2 = await page.locator('div[data-test=select2] .ms-drop ul li').nth(0);
+    await ms2OptionLoc2.click();
+    await expect(ms2OptionLoc2.locator('label span')).toHaveText('50"');
+    const spanLoc2 = await ms2OptionLoc2.locator('span').innerHTML();
+    await expect(spanLoc2).toBe('50"');
+
+    const ms2OptionLoc3 = await page.locator('div[data-test=select2] .ms-drop ul li').nth(2);
+    await ms2OptionLoc3.click();
+    await expect(ms2OptionLoc3.locator('label span').nth(0)).toHaveText('<span style="font-weight:bold">33</span>');
+    const spanLoc4txt = await ms2OptionLoc3.locator('span').textContent();
+    const spanLoc4html = await ms2OptionLoc3.locator('span').innerHTML();
+    await expect(spanLoc4txt).toBe('<span style="font-weight:bold">33</span>');
+    await expect(spanLoc4html).toBe('&lt;span style="font-weight:bold"&gt;33&lt;/span&gt;');
+
+    await page.waitForTimeout(90);
+    await expect(page.locator('div[data-test=select2] .ms-choice span')).toHaveText(
+      '50", <span style="font-weight:bold">33</span>'
+    );
+    let ms2ParentSpanLocText = await page.locator('div[data-test=select2].ms-parent .ms-choice span').textContent();
+    let ms2ParentSpanLocHtml = await page.locator('div[data-test=select2].ms-parent .ms-choice span').innerHTML();
+    await expect(ms2ParentSpanLocText).toBe('50", <span style="font-weight:bold">33</span>');
+    await expect(ms2ParentSpanLocHtml).toBe('50", &lt;span style="font-weight:bold"&gt;33&lt;/span&gt;');
+
+    await page.locator('button#enableRenderHtml').click();
+    ms2ParentSpanLocText = await page.locator('div[data-test=select2].ms-parent .ms-choice span').nth(0).textContent();
+    ms2ParentSpanLocHtml = await page.locator('div[data-test=select2].ms-parent .ms-choice span').nth(0).innerHTML();
+    await expect(ms2ParentSpanLocText).toBe('50", 33');
+    await expect(ms2ParentSpanLocHtml).toBe('50", <span style="font-weight:bold">33</span>');
   });
 });