fix: assigning text to textContent should be html decoded, fixes #417 (#418)

Author: ghiscoding

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

@@ -18,6 +18,7 @@ import {
   getComputedSize,
   getOffset,
   getSize,
+  htmlDecode,
   insertAfter,
   toggleElement,
 } from './utils/domUtils.js';
@@ -1487,7 +1488,7 @@ export class MultipleSelectInstance {
     if (this.isRenderAsHtml) {
       elmOrProp.innerHTML = (typeof this.options.sanitizer === 'function' ? this.options.sanitizer(value) : value) as unknown as string;
     } else {
-      elmOrProp.textContent = value;
+      elmOrProp.textContent = htmlDecode(value);
     }
   }
 

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

@@ -1,5 +1,5 @@
 import type { HtmlStruct, InferDOMType } from '../models/interfaces.js';
-import { objectRemoveEmptyProps } from './utils.js';
+import { isDefined, objectRemoveEmptyProps } from './utils.js';
 
 export interface HtmlElementPosition {
   top: number;
@@ -228,6 +228,23 @@ export function findParent(elm: HTMLElement, selector: string) {
   return targetElm;
 }
 
+/**
+ * Simple function to decode the most common HTML entities.
+ * For example: "&lt;div&gt;Hablar espa&#241;ol? &#55358;&#56708;&lt;/div&gt;" => "<div>Hablar español? 🦄</div>"
+ * @param {String} inputValue - input value to be decoded
+ * @return {String}
+ */
+export function htmlDecode(input?: string | boolean | number): string {
+  if (isDefined(input)) {
+    // 1. decode html entities (e.g. `&#39;` => single quote)
+    // 2. use textarea to decode the rest (e.g. html tags and symbols, `&lt;div&gt;` => `<div>`)
+    const txt = document.createElement('textarea');
+    txt.innerHTML = input.toString().replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(dec));
+    return txt.value;
+  }
+  return '';
+}
+
 export function insertAfter(referenceNode: HTMLElement, newNode: HTMLElement) {
   referenceNode.parentNode?.insertBefore(newNode, referenceNode.nextSibling);
 }

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

@@ -33,8 +33,8 @@ export function deepCopy<T = any>(obj: T): T {
   return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, deepCopy(value)])) as T;
 }
 
-export function isDefined(val: any) {
-  return val !== undefined && val !== null && val !== '';
+export function isDefined<T>(value: T | undefined | null): value is T {
+  return <T>value !== undefined && <T>value !== null && <T>value !== '';
 }
 
 /**