"top level" {{#if}} not allowed

[buschtoens]

I know this is a total edge-case, but I can't really work around it, so here goes: It is not possible to use a "top level" {{#if}} helper inside a vertical-collection.

{{!-- This is illegal... --}}
{{#vertical-collection items as |item i|}}
  {{#if renderAsParagraph}}
    <p>{{item}}</p>
  {{else}}
    <textarea>{{item}}</textarea>
  {{/if}}
{{/vertical-collection}}

{{!-- ...while this works. --}}
{{#vertical-collection items as |item i|}}
  <div>
    {{#if renderAsParagraph}}
      <p>{{item}}</p>
    {{else}}
      <textarea>{{item}}</textarea>
    {{/if}}
  </div>
{{/vertical-collection}}

Initially, all is well. But if you scroll a bit and then toggle renderAsParagraph, you get this error:

Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I stumbled upon this bug (?) while working on this PR: https://github.com/offirgolan/ember-light-table/pull/514#issuecomment-346613745

Do you see any chance of "fixing" this?

[buschtoens]

My assumption is that Glimmer tries to update / remove parts of the DOM, that already have been destroyed by vertical-collection.

[simonihmig]

For the record: seems related to https://github.com/yapplabs/ember-wormhole/issues/66

[pzuraq]

Yeah this is most likely due to the bounds of the component that’s being managed being manipulated in some weird way by Glimmer.

However, VC already does dom manipulation at a low level, so if we can figure out what’s going on here I think we can provide a fix 🙂 I’m not going to have time until after the holidays most likely, but if you’d like to give it a shot @buschtoens ping me on slack, can help guide you on it

[runspired]

I believe the issue relates to us removing our own custom bounds.

[RobbieTheWagner]

Does anyone have further insight into this issue or should we close as wontfix?