Akryum / Akryum/vue-virtual-scroller
Content of new node being replaced by existing node
- Dominant language
- TypeScript
- Stars
- 10.8k
- Forks
- 973
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
Hi all,
I have a weird situation whereby when I add a new message/nodes to the end of my array the content showing is actually the content of another message somewhere else in the stack and not the message that I sent. However I can see in dev tools that the content of the latest node is correct.
I am assuming this is down to the virtualisation side, of which Im not too familiar, so probably something relatively simple to fix given the correct knowledge.
https://github.com/Akryum/vue-virtual-scroller/assets/12802934/8713b3ad-c98f-4dca-8f9b-ed71088d52bd
### Reproduction
Heres the code as it stands. im using tailwind so you can see all styles applied:
```
```
Here is the code that updates messages:
```
onMounted(async () => {
const channels = await streamChatInstance.queryChannels({id: props.stage.id}, [{last_updated: -1}], {
watch: false,
});
streamChatChannel.value = channels[0];
await streamChatChannel.value.watch();
messages.value = streamChatChannel.value.state.messageSets[0].messages
streamChatChannel.value.on('message.new', (event) => {
scroller.value.scrollToBottom()
messages.value = streamChatChannel.value.state.messageSets[0].messages
scroller.value.forceUpdate();
})
streamChatChannel.value.on('message.updated', (event) => {
messages.value = streamChatChannel.value.state.messageSets[0].messages
scroller.value.forceUpdate();
})
})
```
### System Info
```shell
N/A
```
### Used Package Manager
npm
### Validations
- [X] Read the [docs](https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md).
- [X] Check that there isn't [already an issue](https://github.com/Akryum/vue-virtual-scroller/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/Akryum/vue-virtual-scroller/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.