HTML component with dynamic content break

[mrcaboom]

Environment

Please provide as many details as you can:

When you render an HTML component with dynamic content, it breaks :

{ label: 'MY HTML COMPONENT', key: 'my_key', type: 'htmlelement', content: function(e) { return "HELLO"; }, },

The issue is caused by #4572 to fix it, the "this.interpolate" method should be called before the "this.component.content.replace".

• Hosting type
  • [x] Local deployment
    • Version: latest
• Formio.js version: latest

Expected behavior

It should print "HELLO" in the form

Observed behavior

This error:

Uncaught TypeError: this.component.content.replace is not a function at m.get (formio.full.min.js:2:582857) at m.value (formio.full.min.js:2:583853) at m.value (formio.full.min.js:2:583977) at formio.full.min.js:2:425389 at formio.full.min.js:2:1573775 at gr (formio.full.min.js:2:1563602) at formio.full.min.js:2:1573580 at Function.ga (formio.full.min.js:2:1586073) at formio.full.min.js:2:425360 at Array.map ()

[xjia-lighthousehq]

You will need to place the js code within {% %} tags.

The following will print "HELLO" on the form

{
  "label": "MY HTML COMPONENT",
  "content": "{%\nfunction f(e) { return \"HELLO\"; }\n%}\n{{f()}}",
  "key": "my_key",
  "type": "htmlelement",
  "input": false,
  "tableView": false
}

[daneformio]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!