Bug: <For> cannot update values in input field

[Skarvion]

What version of million are you using?

2.6.4

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Edge, Firefox

Describe the Bug

When I have a state of an array of Foo, and display them as a list using <For> with one of the item has an input value, then the input value does not get re-rendered when the items in the list have changed, even when adding key attribute to the item in the loop. Also, I'm still new-ish to React and Million, so please bear with me.

Steps to reproduce:

1. Add a state of an array of object (e.g. with fields Id, Name, Quantity)
2. Object has one field that will be used (e.g. Quantity)
3. The array is rendered as a list with <For>, with the changeable field tied to an input, alongside onChange logic that updates the field of an id appropriately.
4. Add a logic that somehow reshuffle the displayed items (e.g. filtering by name, pagination, etc)
5. Run the app
6. Enter the value for that field
7. Reshuffle the items
8. The previous value of a row is displayed in the same position for the wrong item.

Removing <For> and using map seems to fix the issue but that's counter-productive if I want to render a large amount of items and hence me raising this issue. Also for the sake of learning.

Further investigation:

• Say if I set name to have an input field, and filter the items by name, then it works for some reason
• Checking the web browser page source, the input field value is changed correctly based on the item, but not rendered at all. Probably a react thing, so please kindly explain about that one.

I have pasted a StackBlitz link, but I'm not familiar with how to setup million on StackBlitz, so it cannot load properly. Please take a look at App.tsx and FooRowItem.tsx. Please do tweak to make it load properly if you can.

What's the expected result?

I expect that when using <For> and having the array filtered/sorted, it should able to render the input field with the value associated to the item.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/stackblitz-starters-mkghhj?file=src%2FApp.tsx

Participation

• [ ] I am willing to submit a pull request for this issue.

[github-actions[bot]]

Thanks for opening this issue! A maintainer will review it soon.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[Skarvion]

Bump

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.