Aurelia: ValueConverter on collection not executed after adding a new item to the collection

[eriklieben]

🐛 Bug Report

A value converter on a collection is not executed when an item is added to the collection, see:

Is executed after adding an item to the collection in au1:
e2e test run: https://youtu.be/75rCPILsyy8
code: https://github.com/eriklieben/mua-component-library-au1

AU2
e2e test run: https://youtu.be/-ZwRDa8HlOQ
code: https://github.com/eriklieben/mua-component-library

See the last e2e test "should find items that are added to the list after searching", after adding the item it is in the collection (bottom list), but the repeat.for loop with a value, binding doesn't get executed to refresh/update the result. When (by hand) I perform the same and clear the search term and apply it again, the result is correct (because it executed the value converter in between my actions).

It currently directly updates the items in the collection, because I assumed it had something to do with me cloning the collection, wanted to exclude that as a possibility. Left that in, because that might be easier in finding a solution.
In production, one would probably clone the collection, before applying modifications, but I think/assume if it executed the value converter after a modification to the collection that scenario should also work again.

🤔 Expected Behavior

After a collection is modified (item added) the value converter should be executed.

😯 Current Behavior

The value converter is not executed after an item was added.

💁 Possible Solution

not sure.

🔦 Context

💻 Code Sample

AU2 code https://github.com/eriklieben/mua-component-library
same logic in AU1 code: https://github.com/eriklieben/mua-component-library-au1

you can run the cypress e2e tests in both code samples to see the behavior.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Aurelia |dev
| Language | ts
| Browser | chrome 78 on windows 10
| Bundler | webpack
| Operating System | win 10
| NPM/Node/Yarn | npm 6.10

Let me know if I need to explain it better or more clearly. Thanks!

[avrahamcool]

Possible Solution (hack around the problem):

https://github.com/eriklieben/mua-component-library/blob/71d9353dc563b53cd7f94c4202db73f79955251e/src/components/mua-search-with-select.html#L11

changing repeat.for="item of items | search:searchText" to: repeat.for="item of items | search:searchText:items.length" should do the trick.
you don't have to actually accept this additional parameter in your value converter.

[Sayan751]

@bigopon I was looking into this. It seems to me that when connecting the binding from VC expression evaluation, we need to force somehow a collection observer if the value is a collection. Otherwise it picks up a cached bindable observer or a setter observer. Do you think it is something you can address in your ongoing work?

[bigopon]

There's a difference in the observation behavior of the repeat implementations. In v1, it observes the original collection while in v2, it observes the final collection, which means VC that returns new collection won't trigger repeat update when the original collection is mutated. This will be fixed once we update the repeater.

[Sayan751]

@bigopon Noticed another odd issue involving repeater and debounce: https://github.com/aurelia/aurelia/issues/786#issuecomment-727631810