Change to a bound repeat input element is applied to the VM a second time after the element has been deleted.

[geleto]

I'm submitting a bug report

• Library Version:
  1.0.7
• Browser:
  Chrome

I have an array of strings bound to a repeat with input text elements. I want to delete an element when the user deletes it's content. Because there is no way to observe changes in array values, I handle the input event, check for empty values and remove the corresponding elements from the array.

The bug is - the bound value (which was just changed to empty text by the user) is applied to the VM twice, the first time after the input content has been deleted by the user, and once again - after the element is deleted from the array in the event handler, which blanks the next element which has taken it's place. I tried to avoid this bug by using queueTask to postpone deleting the array element, to no avail.

See this gist, to reproduce the bug, just delete the text in one of the first 3 inputs:
https://gist.run/?id=e49828b236d979450ce54f0006d0fa0a

[geleto]

This is not a question, it's a bug report!!!
This is clearly a bug - when one bound input is changed - the change should not be applied two times (the second time - invalidating the wrong array element).
Sorry for asking for ideas how to work around the bug in the P.S. - I have removed this.

[jdanyow]

@geleto I'm closing this because it's a duplicate of #444

Please refer to the discussion in that issue for more information. The short answer is this doesn't do anything in pure javascript:

for (let item of items) {
  item = 'something else'; // note: this does not change the contents of the array
}

Similarly, this doesn't do anything in a repeat.for either:

<input repeat.for="item of items"
       value.bind="item">  // note : this does not change the contents of the array

[geleto]

Please read my description and see the linked gist, this has nothing to do with #444.
I do the binding correctly, and the bound array is changed - no problem here. Problem is after I delete an array element, the same change is wrongly applied a second time, but to a different element which has taken the place of the deleted one. The delete happens after the bound input value has been assigned to the corresponding array element and there is no reason why the same change has to be applied a second time to an unrelated element, this is clearly a bug.

<template>
  <div repeat.for="i of messages.length">
    <input type="text" value.bind="$parent.messages[i]" input.delegate="onMessageChanged()">
  </div>
</template>

[geleto]

I have created a simpler test case in this gist:
https://gist.run/?id=f3e7002bf3b60472313b8f9c5963c7c4

When any value is changed, the first element in the array is deleted from the 'input.delegate' event handler. Notice how the changed value is applied to two different inputs.