Component losing renderBody input on a particular redraw

[gilbert]

Bug Report

When using <include(input) />, that content is being lost during a particular redraw (it sometimes comes back after another redraw).

Context

• components/my-component/index.marko

class {
  demonstrate() {
    this.getComponent('one').forceUpdate()
    this.getComponents('two').forEach( f => f.forceUpdate() )
  }
}

<div class="the-form">

  <c-1 key="one">Text One</c-1>

  <c-1 key="two[]">Text Two</c-1>
  <c-1 key="two[]">Text Two (again)</c-1>

  <button on-click('demonstrate')>Force Update</button>
</div>

• components/c-1/index.marko

class {
  onCreate() {
    this.state = { value: 'x' }
  }
  updateValue(e) {
    this.state.value = e.target.value
    console.log("New value:", this.state.value)
  }
}

<div class="c-1">
  <h2 class="prompt"><include(input)/></h2>
  <input type="text" value=state.value on-change('updateValue') />
</div>

Load a page that includes <my-component />. Here are different ways to reproduce:

• Visit the page, then click the Force Update button. All the h2 tags disappear.
• Visit the page, then change the first input, then click out to blur. The first h2 disappears.

Expected Behavior

The h2 tags should stay in place.

Additional Info

Your Environment

• Version used: v4.0.0
• Environment name and version): Chrome 56
• Operating System and version (desktop or mobile): OS X

[gilbert]

Looks like the workaround is to explicitly type <include(input.renderBody)/>

[patrick-steele-idem]

Thanks for the bug report. I'll take a look

[patrick-steele-idem]

Bug confirmed. <include(input.renderBody)/> is the correct workaround, but we will include a fix in the next patch release (lower priority since there is a straightforward workaround). Thanks, again, for the bug report.