# Flex Repeater not refreshing when \`instances\` list changes

**URL:** <https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [December 29, 2021, 2:03am UTC](https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508 "2021-12-29T02:03:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![thewebpleb](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thewebpleb/32/27415_2.png) [@thewebpleb](https://forum.inductiveautomation.com/u/thewebpleb)\
**Post date:** [December 29, 2021, 2:03am UTC](https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508/1 "2021-12-29T02:03:25Z")

</div>

I'm trying to figure out why the flex repeater won't refresh what is displayed when the `instances` list changes. I have a flex repeater that starts out with 4 objects (the actual number of objects doesn't matter).

I have a button which has this script on it:

```python
toast = {
    "border-color": "blue",
    "text": "This is an info message."
}
	
self.getSibling("FlexRepeater").props.instances.append(toast)

```

When I add an object, the flex repeater updates right away and I can see the new view appear.

However, when I remove an item in the `instances` list, I get weird behavior. The actual `instances` list changes, but the number of views displayed in the repeater acts really weird, especially when the instance that is being deleted isn't the last one. It usually just removes all instances from the flex repeater.

This is a problem that is hard to explain, so I'll include a link to a short video below. What is interesting is that `instances` changes exactly how I would expect it to (including with a 1 second delay so that the animation finishes displaying).

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c0e6dce94ea8e19a67491baa7fc74e37816f49ac.jpeg "Flex Repeater issues") ](https://www.youtube.com/watch?v=5TciSB147OI)

(I'm being told I'm a new user, so I can't add it directly into this post).

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 29, 2021, 2:11am UTC](https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508/2 "2021-12-29T02:11:34Z")

</div>

I suspect you are suffering from the expectations of the event system of Ignition. Generally, properties that take lists and datasets and documents don’t properly react to changes unless the base object is itself replaced. Internal changes don’t produce events, but lookups within them afterwards can yield inconsistent results. In your script, try using something like:

```auto
newList = list(self.getSibling("FlexRepeater").props.instances)+[toast]
self.getSibling("FlexRepeater").props.instances = newList

```

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [December 29, 2021, 4:24am UTC](https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508/3 "2021-12-29T04:24:56Z")

</div>

I’m also guessing. Do you see the same behavior while not using the ease transition?

---

<div class="post-metadata">

**Author:** ![thewebpleb](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thewebpleb/32/27415_2.png) [@thewebpleb](https://forum.inductiveautomation.com/u/thewebpleb)\
**Post date:** [December 29, 2021, 3:50pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508/5 "2021-12-29T15:50:03Z")

</div>

This is it… Here is the script I had on the `close` icon on the toast:

```auto
import time
self.parent.props.style.classes = "animate __animated animate__ backOutLeft" # root container of Toast view
time.sleep(1) # this is so the animation displays; otherwise just disappears

system.perspective.print("index: " + str(self.view.params.index))
system.perspective.sendMessage("removeToastByIndex", payload = { "index": self.view.params.index })

```

When I removed the first 3 lines, the problem went away. I can add and remove instances and it behaves as expected. I also implemented @pturmel’s solution above, but I don’t think that was the problem.

---

<div class="post-metadata">

**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\
**Post date:** [December 29, 2021, 4:40pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508/6 "2021-12-29T16:40:05Z")

</div>

Great, I haven’t play that much with CSS but I think there is a cleaner way to do delayed transitions. Maybe a transform or opacity0 might work better than a delayed transition. But timing is written as `1s` or `1.5s` in css.

---

<div class="post-metadata">

**Author:** ![thewebpleb](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/thewebpleb/32/27415_2.png) [@thewebpleb](https://forum.inductiveautomation.com/u/thewebpleb)\
**Post date:** [December 29, 2021, 4:57pm UTC](https://forum.inductiveautomation.com/t/flex-repeater-not-refreshing-when-instances-list-changes/54508/7 "2021-12-29T16:57:04Z")

</div>

The delay `time.sleep(1)` doesn’t do anything for the animation directly. If I don’t put it in there, the instance is deleted immediately from the flex repeater and the flex repeater instances are redrawn, so the animation doesn’t ever happen as far as the user can see.

I’m using the `animate.css` library to deal with the animations, I just add the appropriate classes to my components. I would love to use animation to dismiss alerts, it makes my Perspective application feel like a full-blown interactive web application. I’m more bummed because the animation works exactly as expected if the toast that is being dismissed is the last one. Oh well…