FIO-8395: html in error message not evaluating (#5632)

* Added test for unescapeHTML function and reorganized test

* unescapeHTML function no longer escapes html tags

* Removed code causing html tags to be removed from error messages

* getTemplateValue now uses removeHTML

* Added removeHTML function and removeHTML tests

src/components/_classes/component/Component.js

@@ -2156,9 +2156,6 @@ export default class Component extends Element {
 
     if (this.refs.messageContainer) {
       this.setContent(this.refs.messageContainer, messages.map((message) => {
-        if (message.message && typeof message.message === 'string') {
-          message.message = message.message.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
-        }
         return this.renderTemplate('message', { ...message });
       }
       ).join(''));

src/components/select/Select.js

@@ -3,7 +3,7 @@ import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Input from '../_classes/input/Input';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, unescapeHTML, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 
 import Choices from '../../utils/ChoicesWrapper';
 
@@ -1820,7 +1820,7 @@ export default class SelectComponent extends ListComponent {
     const getTemplateValue = (v) => {
       const itemTemplate = this.itemTemplate(v);
       return options.csv && itemTemplate
-        ? unescapeHTML(itemTemplate)
+        ? removeHTML(itemTemplate)
         : itemTemplate;
     };
 

src/utils/utils.js

@@ -448,6 +448,16 @@ export function setActionProperty(component, action, result, row, data, instance
   return component;
 }
 
+/**
+ * Removes HTML tags from string e.g. <div>Hello World</div> => Hello World
+ * @param {string} str
+ * @returns {string}
+ */
+export function removeHTML(str) {
+  const doc = new window.DOMParser().parseFromString(str, 'text/html');
+  return (doc.body.textContent || '').trim();
+}
+
 /**
  * Unescape HTML characters like &lt, &gt, &amp and etc.
  * @param str
@@ -457,9 +467,9 @@ export function unescapeHTML(str) {
   if (typeof window === 'undefined' || !('DOMParser' in window)) {
     return str;
   }
-
-  const doc = new window.DOMParser().parseFromString(str, 'text/html');
-  return doc.documentElement.textContent;
+  const elem = document.createElement('textarea');
+  elem.innerHTML = str;
+  return elem.value;
 }
 
 /**

src/utils/utils.unit.js

@@ -820,13 +820,27 @@ describe('Util Tests', () => {
         done(error);
       }
     });
+  });
+
+  describe('unescapeHTML', () => {
+    it('should not remove html tags from string', () => {
+      const unescapedString = utils.unescapeHTML('<div><p>This is a paragraph.</p> <p>This is another paragraph.</p></div>');
+      expect(unescapedString).to.equal('<div><p>This is a paragraph.</p> <p>This is another paragraph.</p></div>');
+    });
 
-    it('Should return string without HTML characters', () => {
+    it('should return string without HTML characters', () => {
       const unescapedString = utils.unescapeHTML('&lt;p&gt;ampersand &amp; &#34;quotes&#34; test&lt;&#47;p&gt;');
       expect(unescapedString).to.equal('<p>ampersand & "quotes" test</p>');
     });
   });
 
+  describe('removeHTML', () => {
+    it('should remove html tags from string', () => {
+      const removedHTML = utils.removeHTML('<div><p> Hello</p> <p>World</p></div>');
+      expect(removedHTML).to.equal('Hello World');
+    });
+  });
+
   describe('getCurrencyAffixes', () => {
     it('USD en', (done) => {
       try {