Akryum / Akryum/vue-virtual-scroller

Content of new node being replaced by existing node

Aberta
#810 1 comentário 0 reações 0 responsáveis Ver no GitHub
bug
Linguagem predominante
TypeScript
Estrelas
10.8k
Forks
973
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

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

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.