Akryum / Akryum/vue-virtual-scroller

Content of new node being replaced by existing node

Open
#810 1 comment 0 reactions 0 assignees View on GitHub
bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.