[BUG] Nodes states are shared between items
zumm opened this issue · 8 comments
Since component uses item indexes as keys, vue renders items with same nodes. It causes some side effects, e.g. nodes keep focus.
If I recall correctly, I use index as the key of v-for for performance benefits, so Vue just patch changed nodes, and leave unchanged node untouched.
Could you elaborate on this issue? Ideally provide something that demonstrates the bug.
See this demo. Click on some item. It should become focused (red). Then just scroll and you should see other items focused.
I think using internalItem.index as key is better way. But even that is not enough since pageProvider may be changed. So also grid must provide option to allow user uses part of item as key.
At other side supporting this option can be tricky because of items have loading time during which they are undefined. Mb generating some unique ids for items (e.g. timestamp of last change pageProvider + internalItem.index) is the way.
Hmm, this is interesting.
We can start with experimenting with random key on each item or using a hash of the item as key.
Not sure about the performance implication with this though.
Wanna me to implement that?
@zumm You are more than welcome to fix it! If it's not urgent to you, you can leave it to me and I'll try to find sometime for it.
@rocwang would it be a solution to let the users define which field (from the list passed through pageProvider) that should be used as the key identifier on v-for?
And if none defined then use a random key?
would it be a solution to let the users define which field (from the list passed through pageProvider) that should be used as the key identifier on v-for?
And if none defined then use a random key
#230 uses timestamp as the v-for key, which should fix the issue more or less. I'll punt "the solution to et the users define which field (from the list passed through pageProvider) that should be used as the key identifier on v-for" for now. (PR is welcomed though.)