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

themattkenney commented 4 years ago

Environment

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

Formio.js version: Lastest
Browser: All

Steps to Reproduce

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

randallknutson commented 4 years ago

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 commented 4 years ago

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