[BUG] Address component does not render correctly in HTML mode

[themattkenney]

Environment

Local using latest build https://unpkg.com/formiojs@latest/dist/formio.full.min.js

• Formio.js version: Lastest
• Browser: All

Steps to Reproduce

1. Display a form using viewAsHTML or renderMode: 'html'

Expected behavior

Should display for the submission without controls and data. No way to display only data with current builds.

Observed behavior

• viewAsHTML does not remove controls as it did in 3.x
• renderMode does not render any values.

Example

https://jsfiddle.net/0Lvtaxes/

<div id='formio'></div>

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- formio -->
<link rel='stylesheet' href='https://unpkg.com/formiojs@latest/dist/formio.full.min.css'>
<script src='https://unpkg.com/formiojs@latest/dist/formio.full.min.js'></script>

<!-- code -->
<script type='text/javascript'>
  Formio.createForm(document.getElementById('formio'), 'https://examples.form.io/example', {
    readOnly: true,
    renderMode: 'html'
  }).then(function(form) {
    form.submission = {
      data: {
        firstName: 'Joe',
        lastName: 'Smith',
        email: 'joe@example.com'
      }
    };
  });
</script>

[aiwebb]

@themattkenney, here's a fork of that fiddle that redraws the form after setting the submission with those data values:

https://jsfiddle.net/qre4wj5d/

Can you clarify what you mean by controls not being removed?

[themattkenney]

@aiwebb in 3.X viewAsHTML would remove the controls like the renderMode: 'html' does.

I see your code addition of
' form.on('change', () => {
form.redraw()
})'

Is this addition required in 4.x load the values or is it a hack to get around an issue?

Thank you for showing the change as this will get me what I need.

[MohitNaroliya]

@aiwebb - form.redraw() works for me but the Google Address field value show as [object Object].

[randallknutson]

The form should probably redraw after setting the submission automatically and not require the form.redraw(). The google address must not have a good view as html rendering yet. We can look into this.

[themattkenney]

@randallknutson any update on if/when the address html view bug will be fixed?

[jeriah-formio]

@themattkenney
We are hoping to get this item fixed with a new build by early next week.

[themattkenney]

@jhen1422 Any update on the fix for the address part?

[jeriah-formio]

@themattkenney We're still working on the address component working out some minor issues. I'll be sure to let you know when this has been complete and pushed.

[MohitNaroliya]

Hi @jhen1422 - Any update on this issue fix?

[jeriah-formio]

@MohitNaroliya This feature is still a work in progress.

[josecristhian]

Hi, the fix is going to be just for the address component or for all components when using viewAsHTML?

[jeriah-formio]

@josecristhian This is currently being worked on for the address component

[themattkenney]

@jhen1422 any update on the progress for this bug?

[jeriah-formio]

@themattkenney This issue is still outstanding for the Address component.

[MohitNaroliya]

@jhen1422 @aiwebb - Any update on this issue?

[wag110894]

This item is still on our backlog. We welcome a pull request and have a process to expedite if you are interested. Please contact support@form.io if you are interested in expediting.

Thank you.

[travist]

I am pretty certain this PR will resolve this issue. We will close it once we pull that in and confirm.

#4745

[VikkiAlenn]

We assume that this issue has been already resolved with this PR #4745. Closing this thread. Please re-open if it is still relevant. Thank you for your contribution!