[BUG] Select/Multiselect values do not show in HTML render-mode

[waterbuckit]

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [x ] Local deployment
    • Version:
• Formio.js version: 4.12.7
• Frontend framework: -
• Browser: Google Chrome
• Browser version: 87.0.4280.88 (Official Build) (64-bit)

Steps to Reproduce

1. Set data in a multiselect/select field when filling out form
2. reload the form but with render mode as "html" and readOnly

Expected behavior

Selected values should be in the HTML rendered view

Observed behavior

No values are present in HTML renderMode but are in the normal readOnly view.

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

[wag110894]

Hello @waterbuckit, Apologies on the delay. This is a known issue that is currently part of our backlog. The ticket number is FIO-1543.

[0liver]

I have just hit the same problem. I've done some investigation, although I have no idea whether this helps any. In case you need more input, please let me know.

The missing value in the html render mode is even more problematic for us because the Webform.render() also misses the value for the Select component, so I cannot use either:

[Tatsiana8]

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

[runekaagaard]

It's still broken in formio.js 5.0.2 unfortunately and it's a super annoying error. We are still maintaing our own readonly rendering module because of this bug.

[olgabann]

@runekaagaard @0liver I was not able to reproduce the issue in formiojs 5.0.1. Plese provide any additional information to replicate the issue if my steps are not correct.

https://github.com/user-attachments/assets/3618d474-f945-4fce-af31-52d000a3ea3b

[runekaagaard]

Hi, thx a lot for testing! Sry, my memory was a bit hazy. I've confirmed with my colleague that we have only seen the error in Radio Components, where the values are integers. I think it's regardless of what the Storage Type is set to. See:

If you can't reproduce it, I'll create a failing fiddle.js for you. I couldn't read the url of your example, but that looks like a good fork point :)

[olgabann]

I still couldn't reproduce it. Could you please provide your JSFiddle? https://jsfiddle.net/cfroszeL/

https://github.com/user-attachments/assets/ea5e353c-0cad-417d-8819-5b45767a45f0

[runekaagaard]

Thank you so much for trying. I've reproduced the problem here:

https://jsfiddle.net/67j1w52r/21/

Removing renderMode: "html" shows the readOnly output correctly.

The form is a wizard btw. that might be important too?

[olgabann]

@runekaagaard could you please try to remove quotes from radio values? It solves the issue

https://github.com/user-attachments/assets/fe7b520e-e6a0-452f-a8af-da3c71c445b6

[runekaagaard]

Yeah, that makes the text appear correctly, nice find! The bug then seems to be in the builder that does not respect the "Storage Type" when creating the form.

[olgabann]

I have logged a ticket for the backlog. We are always willing to review any contributions from the open source community to resolve this issue.

For internal reference: FIO-10006

[runekaagaard]

Even though it might seem trivial from the perspective we are currently viewing it, it seems like a very foundational data structure of your entire project. Changing it to the correct datatype might break a multitude of things both in formio.js and the enterprise code.

It does not feel like a good first issue, but one that might be worth the time to fix.

[runekaagaard]

This hack fixes renderMode: "html":

formio = formio || {}
formio.fixRenderModeHtmlDataformat = function(form, root = true) {
  // https://github.com/formio/formio.js/issues/3947
  
  if (root) {
    form = JSON.parse(JSON.stringify(form))
  }

  if (form.input === true) {
    try {
      for (let i = 0; i < form.values.length; i++) {
        try {
          if (typeof form.values[i].value === 'string' && 
            /^\d+$/.test(form.values[i].value)) {
            form.values[i].value = parseInt(form.values[i].value, 10)
          }
        } catch (error) {}
      }
    } catch (error) {}
  }

  try {
    if (form.components) {
      for (const component of form.components) {
        formio.fixRenderModeHtmlDataformat(component, false)
      }
    }
  } catch (error) {}

  return form
}

// usage
form = formio.fixRenderModeHtmlDataformat(form)

[lane-formio]

This is resolved with https://github.com/formio/formio.js/pull/6104