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

**URL:** https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403
**Category:** Help Requests
**Created:** [April 10, 2024, 3:30pm UTC](https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403 "2024-04-10T15:30:09Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![zshall](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zshall/32/1577_2.png) [@zshall](https://discourse.aurelia.io/u/zshall)
#### Post date: [April 10, 2024, 3:30pm UTC](https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403/1 "2024-04-10T15:30:09Z")

</div>

**[Reproduction gist](https://gist.dumber.app/?gist=11fe693725df63be7a83186e1f35e077)**

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/8/861be07eab541150f67a76a9fadc313170bea16f.png)

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/d/df872f1f42f2be1c106862b21da3eb0003cfc149.png)

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.

---

<div class="post-metadata">

### Author: ![airboss001](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/airboss001/32/719_2.png) [@airboss001](https://discourse.aurelia.io/u/airboss001)
#### Post date: [April 11, 2024, 2:39am UTC](https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403/2 "2024-04-11T02:39:05Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![MaximBalaganskiy](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/maximbalaganskiy/32/831_2.png) [@MaximBalaganskiy](https://discourse.aurelia.io/u/MaximBalaganskiy)
#### Post date: [April 12, 2024, 12:47am UTC](https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403/3 "2024-04-12T00:47:28Z")

</div>

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

---

<div class="post-metadata">

### Author: ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)
#### Post date: [April 12, 2024, 1:25am UTC](https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403/4 "2024-04-12T01:25:30Z")

</div>

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

---

<div class="post-metadata">

### Author: ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)
#### Post date: [April 12, 2024, 1:31am UTC](https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403/5 "2024-04-12T01:31:19Z")

</div>

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.

```auto
  <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>

```

---

<div class="post-metadata">

### Author: ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)
#### Post date: [April 12, 2024, 2:00am UTC](https://discourse.aurelia.io/t/possible-bug-if-bind-appends-in-the-wrong-spot/5403/6 "2024-04-12T02:00:13Z")

</div>

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.