# Repeater is not refreshed

**URL:** <https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088>\
**Category:** Help Requests\
**Created:** [November 25, 2019, 3:14pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088 "2019-11-25T15:14:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![timebben](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@timebben](https://discourse.aurelia.io/u/timebben)\
**Post date:** [November 25, 2019, 3:14pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/1 "2019-11-25T15:14:15Z")

</div>

I have found a problem with the repeater data binding. I have a select with options generated by a repeater. Another select controls the source of the repeater. When the selection changes in the parent select, the child select fills with the children of the selection. But if two choices in the parent select generate the same text for the options, but different model.bind (or value.bind), changing between those two choices does not refresh the repeater as it should.

It’s a little difficult to explain more clearly. Here is some code to demonstrate the bug. Changing from Number one to Number two or Number three, the selection is made in the lower select. But changing between number two and number three, the model is not updated.  
app.ts:  
import { Parent, Child } from ‘./model’;  
import { observable } from ‘aurelia-binding’;

export class App {  
Parents: Parent[];  
@observable selectedParent: Parent;  
selectedChildId: string;  
constructor() {  
this.Parents = [];  
let parent = new Parent(‘1’, ‘Number one’);  
parent.Children.push(new Child(‘5’, ‘Child 5’));  
parent.Children.push(new Child(‘6’, ‘Child 6’));  
this.Parents.push(parent);  
parent = new Parent(‘2’, ‘Number two’);  
parent.Children.push(new Child(‘1’, ‘First Child’));  
parent.Children.push(new Child(‘2’, ‘Second Child’));  
this.Parents.push(parent);  
parent = new Parent(‘3’, ‘Number three’);  
parent.Children.push(new Child(‘3’, ‘First Child’));  
parent.Children.push(new Child(‘4’, ‘Second Child’));  
this.Parents.push(parent);  
this.selectedParent = this.Parents[0];  
this.selectedChildId = this.Parents[0].Children[0].Id;  
}  
selectedParentChanged(newValue: Parent, oldValue: Parent) {  
if (newValue) {  
this.selectedChildId = newValue.Children[0].Id;  
}  
}  
}  
model.ts:  
export class Parent {  
Id: string;  
Description: string;  
Children: Child[];  
constructor(id: string, description: string) {  
this.Id = id;  
this.Description = description;  
this.Children = [];  
}  
}

export class Child {  
Id: string;  
Description: string;  
constructor(id: string, description: string) {  
this.Id = id;  
this.Description = description;  
}  
}  
app.html

 ${parent.Description} 

 ${child.Description}

---

<div class="post-metadata">

**Author:** ![timebben](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@timebben](https://discourse.aurelia.io/u/timebben)\
**Post date:** [November 25, 2019, 3:18pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/2 "2019-11-25T15:18:06Z")

</div>

Sorry the HTML file didn’t post correctly.  
\<template\>  
\<div\>  
\<select value.bind=“selectedParent”\>  
\<option repeat.for=“parent of Parents” model.bind=“parent”\>{parent.Description}&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div&gt; &lt;select value.bind="selectedChildId"&gt; &lt;option model.bind="-1"&gt;&lt;/option&gt; &lt;option repeat.for="child of selectedParent.Children" model.bind="child.Id"&gt;{child.Description}\</option\>  
\</select\>  
\</div\>  
\</template\>

---

<div class="post-metadata">

**Author:** ![kyttike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kyttike/32/1398_2.png) [@kyttike](https://discourse.aurelia.io/u/kyttike)\
**Post date:** [November 26, 2019, 7:58am UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/3 "2019-11-26T07:58:26Z")

</div>

Hey,

I created a sandbox to test this: [https://codesandbox.io/s/aurelia-typescript-sandbox-hoj1f?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/s/aurelia-typescript-sandbox-hoj1f?fontsize=14&hidenavigation=1&theme=dark)

If I understood you correctly then the issue did replicate for me, steps to reproduce:

1. Select parent ‘number two’ from the first select
2. Select ‘first child’ from the second select
3. Select parent ‘number three’ from the first select

Expected result: selectedChildId is 3  
Actual result: selectedChildId is 1

---

<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:** [November 26, 2019, 12:47pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/4 "2019-11-26T12:47:42Z")

</div>

Awesome help, thanks ❤

---

<div class="post-metadata">

**Author:** ![timebben](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@timebben](https://discourse.aurelia.io/u/timebben)\
**Post date:** [November 26, 2019, 2:40pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/5 "2019-11-26T14:40:22Z")

</div>

Thank you for doing that. The sandbox is not working for me. The @observable handler is not being called. Thus after any selection change, selectedChild goes to -1. The behavior I’m seeing is that selectedChild is properly set when switching from Number one to Number two, but it is not set when switching from Number two to Number three.

I can’t see any reason @observable isn’t working. The relevant portions of tsconfig are more or less the same as mine.

---

<div class="post-metadata">

**Author:** ![timebben](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@timebben](https://discourse.aurelia.io/u/timebben)\
**Post date:** [November 26, 2019, 10:41pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/7 "2019-11-26T22:41:01Z")

</div>

I updated the sandbox to easily demonstrate the problem:

> **[Aurelia TypeScript Sandbox - CodeSandbox](https://codesandbox.io/s/aurelia-typescript-sandbox-lmum3)**
>
> A CodeSandbox.io template for Aurelia apps that uses TypeScript.

1. At first, Number one is selected, and the default Child 5 is selected
2. Select Number two. The default First Child is selected.
3. Now select number one again. The default Child 5 is selected.
4. Now select number three. The default First Child is selected. Everything works as expected.
5. Finally select number two. Nothing is selected in the lower list.  
Moving back and forth shows that no selection is made any time switching between Number two and Number three. Switching between one and two or one and three works as expected.

This is a bug! The only reason it doesn’t work is because the text in the select options is the same. The model is not the same. The contents of the second select should refresh, but they don’t.

---

<div class="post-metadata">

**Author:** ![arnederuwe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arnederuwe/32/737_2.png) [@arnederuwe](https://discourse.aurelia.io/u/arnederuwe)\
**Post date:** [November 27, 2019, 9:56am UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/8 "2019-11-27T09:56:40Z")

</div>

FYI, I can’t reproduce this behavior in Aurelia V2

---

<div class="post-metadata">

**Author:** ![timebben](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@timebben](https://discourse.aurelia.io/u/timebben)\
**Post date:** [November 27, 2019, 2:16pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/9 "2019-11-27T14:16:07Z")

</div>

Forgive the outsider questions, but what is the time frame for a production release of Aurelia 2 and how much effort would it take to port a large application from 1 to 2?

---

<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:** [November 30, 2019, 4:23am UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/10 "2019-11-30T04:23:17Z")

</div>

It’s been answered before on discourse, i’ll find the links. Mainly it’s simple to no changes for higher templating features, for lower level features, such as factory and view, the API will change. So you can expect all your code will work the same, except where you manually craft stuff

---

<div class="post-metadata">

**Author:** ![timebben](https://avatars.discourse-cdn.com/v4/letter/t/898d66/32.png) [@timebben](https://discourse.aurelia.io/u/timebben)\
**Post date:** [December 2, 2019, 2:11pm UTC](https://discourse.aurelia.io/t/repeater-is-not-refreshed/3088/11 "2019-12-02T14:11:26Z")

</div>

Thanks, I’ll poke around