Skip to content
This repository has been archived by the owner on Nov 5, 2023. It is now read-only.

[BUG] Nodes states are shared between items #227

Closed
zumm opened this issue Jun 1, 2022 · 8 comments
Closed

[BUG] Nodes states are shared between items #227

zumm opened this issue Jun 1, 2022 · 8 comments
Assignees
Labels
bug Something isn't working

Comments

@zumm
Copy link
Contributor

zumm commented Jun 1, 2022

Since component uses item indexes as keys, vue renders items with same nodes. It causes some side effects, e.g. nodes keep focus.

@zumm zumm added the bug Something isn't working label Jun 1, 2022
@rocwang
Copy link
Owner

rocwang commented Jun 1, 2022

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.

@zumm
Copy link
Contributor Author

zumm commented Jun 2, 2022

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.

@zumm
Copy link
Contributor Author

zumm commented Jun 2, 2022

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.

@rocwang
Copy link
Owner

rocwang commented Jun 2, 2022

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.

@zumm
Copy link
Contributor Author

zumm commented Jun 2, 2022

Wanna me to implement that?

@rocwang
Copy link
Owner

rocwang commented Jun 3, 2022

@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 pushed a commit that referenced this issue Jun 4, 2022
@shemsiu
Copy link
Contributor

shemsiu commented Jun 5, 2022

@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?

@rocwang
Copy link
Owner

rocwang commented Jun 23, 2022

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.)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants