# Change.trigger not being called on filtered array in template

**URL:** <https://discourse.aurelia.io/t/change-trigger-not-being-called-on-filtered-array-in-template/5081>\
**Category:** Uncategorized\
**Created:** [January 26, 2023, 9:28am UTC](https://discourse.aurelia.io/t/change-trigger-not-being-called-on-filtered-array-in-template/5081 "2023-01-26T09:28:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [January 26, 2023, 9:28am UTC](https://discourse.aurelia.io/t/change-trigger-not-being-called-on-filtered-array-in-template/5081/1 "2023-01-26T09:28:25Z")

</div>

I have a simple list in my viewmodel

```auto
list = [
    { name: 'One', active: false },
    { name: 'Two', active: true },
    { name: 'Three', active: true },
    { name: 'Four', active: false },
    { name: 'Five', active: false },
  ]

```

In the corresponding template, I want to display the list 3 times.

1. All `active = true` items
2. All `active = false` items
3. All items

These are all checkboxes with a `change.trigger="onChecked()"` event bound to them.

Now, the problem is that `onChecked()` never gets called for the first two lists, which are added to the template like this:

- `repeat.for="item of list.filter(d => d.active)"`
- `repeat.for="item of list.filter(d => !d.active)"`

For the third list that gets added like this:

- `repeat.for="item of list"`

Everything works as expected

```auto
<div>Active Elements in list</div>
<div style="margin-bottom: 20px">
  <div repeat.for="item of list.filter(d => d.active)">
    <input
      type="checkbox"
      checked.bind="item.active"
      change.trigger="onChecked()"
    />
    - ${item.name}
  </div>
</div>

<div>Non Active Elements in list</div>

<div style="margin-bottom: 20px">
  <div repeat.for="item of list.filter(d => !d.active)">
    <input
      type="checkbox"
      checked.bind="item.active"
      change.trigger="onChecked()"
    />
    - ${item.name}
  </div>
</div>

<div>All Elements in list</div>

<div>
  <div repeat.for="item of list">
    <input
      type="checkbox"
      checked.bind="item.active"
      change.trigger="onChecked()"
    />
    - ${item.name}
  </div>
</div>

```

Here is a live example:

> **[Aurelia 2 - 2.0.0-beta.1 - for of + filter - StackBlitz](https://stackblitz.com/edit/aurelia-2-2-0-0-beta-1-template-kjxr5j)**

In the example, clicking on any checkbox should make an alert pop up. However, this is not the case, for some reason the alert only pops up when clicking on the checkboxes on the “All Items” list.

If all the `change.trigger` are changed to `click.trigger` it also works as expected.

---

<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:** [January 30, 2023, 5:28am UTC](https://discourse.aurelia.io/t/change-trigger-not-being-called-on-filtered-array-in-template/5081/2 "2023-01-30T05:28:53Z")

</div>

My understanding is it seems related to the way bindings are order and the sequence of the change handling. When change happens, because of the `.filter(d => d.active)`, the repeat may remove/add the checkbox, causing its event handlers like change handler not firing.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [January 30, 2023, 2:59pm UTC](https://discourse.aurelia.io/t/change-trigger-not-being-called-on-filtered-array-in-template/5081/3 "2023-01-30T14:59:18Z")

</div>

Interesting. Thanks for the response. Does that mean that this is not really a bug but the intended behaviour?