fix(common): Select Filter/Editor regular text shouldn't be html enco…

…ded (#1011)

* fix(common): Select Filter/Editor regular text shouldn't be html encoded
- fix a regression bug introduced by PR #976 when migrating from ms-select to ms-select-vanilla, the text should be encode only when `renderHtmlEnabled` is enabled and not encoded when it's the flag is disabled, basically the html encode was set on the wrong condition

examples/vite-demo-vanilla-bundle/package.json

@@ -27,7 +27,7 @@
     "fetch-jsonp": "^1.2.3",
     "flatpickr": "^4.6.13",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^0.4.3",
+    "multiple-select-vanilla": "^0.4.4",
     "rxjs": "^7.8.1",
     "whatwg-fetch": "^3.6.2"
   },

packages/common/package.json

@@ -78,7 +78,7 @@
     "dompurify": "^3.0.3",
     "flatpickr": "^4.6.13",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^0.4.3",
+    "multiple-select-vanilla": "^0.4.4",
     "slickgrid": "^4.0.0",
     "sortablejs": "^1.15.0",
     "un-flatten-tree": "^2.0.12"

packages/common/src/filters/selectFilter.ts

@@ -416,6 +416,7 @@ export class SelectFilter implements Filter {
       filter: false,  // input search term on top of the select option list
       maxHeight: 275,
       single: true,
+      useSelectOptionLabelToHtml: this.columnFilter?.enableRenderHtml ?? false,
       sanitizer: (dirtyHtml: string) => sanitizeTextByAvailableSanitizer(this.gridOptions, dirtyHtml),
       // we will subscribe to the onClose event for triggering our callback
       // also add/remove "filled" class for styling purposes

packages/common/src/services/domUtilities.ts

@@ -89,8 +89,6 @@ export function buildMultipleSelectDataCollection(type: 'editor' | 'filter', col
           // sanitize any unauthorized html tags like script and others
           // for the remaining allowed tags we'll permit all attributes
           optionText = sanitizeTextByAvailableSanitizer(gridOptions, optionText, sanitizedOptions);
-        } else {
-          optionText = htmlEncode(optionText);
         }
         selectOption.text = optionText;
 
@@ -297,16 +295,19 @@ export function findWidthOrDefault(inputWidth?: number | string, defaultValue =
  * 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 entityMap = {
+  const val = typeof inputValue === 'string' ? inputValue : String(inputValue);
+  const entityMap: { [char: string]: string; } = {
     '&': '&amp;',
     '<': '&lt;',
     '>': '&gt;',
     '"': '&quot;',
-    '\'': '&#39;'
+    '\'': '&#39;',
   };
-  return (inputValue || '').toString().replace(/[&<>"']/g, (s) => (entityMap as any)[s]);
+  return (val || '').toString().replace(/[&<>"']/g, (s) => entityMap[s as keyof { [char: string]: string; }]);
 }
 
 /**