live input update, immutable data, handleChange and Ember rerender

Hello,

It is not a bug, but a feature request.

I have a problem when I update

• a property
• of an item
• of a list in the state

by an input field

state
  |- list
       |- * item

{{#each list as |item|}}
  {{input value=item.value key-press=(action update_item_value)}}
  {{!-- trivial version just to understand my problem --}}
{{/each}}

=> the current component and all the parent components and pages are updated, because the state object is updated (it is immutable)

=> and so the {{#each}} helper refreshed the components of the list as well

=> and so the input is refreshed AND I LOOSE THE CURSOR POSITION !

Ember is not like ReactJS: without virtual hierarchy to compare, the real components are updated.

In connect > handleChange, we just check if the value of the property was changed, and when a property of an item of a list is changed, the list is changed too, so ember-redux notify this change.

So how to avoid to refresh everything ?

Thanks

[wooandoo]

Hello,

With the solution of @sandersky, it works: https://ember-twiddle.com/ebfa40f96ba41659765a09b3715587c1/cffae11937938d033482c0cbb5c83ad85f350797?openFiles=components.my-list.js%2C

The first list has the “key” defined, and not the second one.

Thanks.

Frédéric

[sandersky]

@wooandoo is there a unique identifier property on your list items that would allow you to do something like this:

{{#each list key='myUniqueProperty' as |item|}}
  {{input value=item.value key-press=(action update_item_value)}}
  {{!-- trivial version just to understand my problem --}}
{{/each}}

If so, I’m curious if that would solve the issue you are seeing or if the issue still persists.