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

Help Requests
1

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.

image
image650×544 29.6 KB

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:

image

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.

2 Likes
2

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?

3

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

4

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

5

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.

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

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