Possible bug: `if.bind` appends in the wrong spot

Reproduction gist

I’ve recently run into a problem in Aurelia v1 in which using if.bind is causing my HTML elements to be added in the wrong order. I’m not sure what’s causing it exactly, but even if I use if.bind="true" the element is displayed out of order.

As stated I’m not entirely sure why this is happening, but in the reproduction link I’ve shown one instance where it seems to happen on a fresh Aurelia install. Basically if you have a component that has an inner component, and that inner component has a <slot>, this seems to cause the problem:


Anyone know what to do to fix this? A few coworkers have run into it as well lately and I’ve told them to use show instead of if for now.


Using show appears to work I think. If on false completely removes the element whereas show will set it to hidden. So the issue seems to be when the if element is reinserted perhaps?

I’ve observed this in combination of slot and html grids

@bigopon this looks like an interesting edge case for au1’s slot implementation.

I noticed this bug only affects immediate child in the slot. You can bypass this issue now with extra wrapping.

For example, extra <div> wrapper bypassed this issue.

      <input type="checkbox" checked.bind="isFieldBelowShown" />
      Show field below
    <p if.bind="isFieldBelowShown">
      <b>This should be between the checkbox and the paragraph.</b>
    <p>This is the last element on the page</p>
1 Like

This is a frequently encountered issue in v1, when multiple template controllers/slots are used together without wrapping elements. In v1 we obly use a single comment to mark a boundary, and that sometimes cause the movement of dom nodes to be incorrect. Fixing this issue potentially change the html, which could break existing apps.

1 Like