When scroll icon displayed, adding new message doesn't scroll screen to the bottom.

[martynishin]

Describe the bug

When I have a lot of messages and scroll up, the scroll icon is appear. After that I add new message and send. In this moment my screen doesn't scroll to the bottom, it stay in the same place. On the other hand, if I scroll down till the scroll icon disappear, and add new message after that, than screen automatically scroll to the bottom (expected behaviour).

Steps to reproduce

1. Load a lot of messages.
2. Scroll up untill scroll icon is appear.
3. Add new message and send.
4. If the scroll icon not shown, all works fine.

Expected behavior

After adding a new message screen scroll down to this message automatically.

Device (please complete the following information)

MacBook Pro 15"

[antoine92190]

I cannot reproduce. Which version of the chat are you using?
Can you send a GIF of the issue so I can try to reproduce?

[martynishin]

Version 0.7.8

[martynishin]

I cannot reproduce. Which version of the chat are you using?
Can you send a GIF of the issue so I can try to reproduce?

[antoine92190]

Have you change the height of the textarea? Maybe it's breaking the scrolling behaviour.
If you did, could you revert it to default and see if it fixes the issue?

[martynishin]

No, I haven't change the height of the textarea and didn't use :height prop.
But if I try to use this prop and pass any value, scrolling behaviour still incorrect.

Below you can see an example of my Chat component:

<chat-window
:current-user-id="currentUserId"
:rooms="rooms"
:messages="messages"
:show-audio="false"
:show-files="true"
:show-emojis="false"
:show-reaction-emojis="false"
:show-add-room="false"
:messages-loaded="messagesLoaded"
:loading-rooms="false"
:rooms-loaded="true"
@send-message="sendMessage"
@fetch-messages="fetchMessages"
/>

[antoine92190]

I still cannot reproduce. Your textarea doesn't have the same height as on the demo, maybe you are overriding it in your css.
If not, could you please share your project or a minimal reproducible example so I can debug it?

[martynishin]

Try to do it on the clear project. Just follow the next steps:

1. Use code snippet below.
2. yarn add vue-advanced-chat
3. yarn run watch

<template>
    <div>
        <chat-window
            :current-user-id="currentUserId"
            :rooms="rooms"
            :messages="messages"
            @send-message="sendMessage"
            @fetch-messages="fetchMessages"
        />
    </div>
</template>

<script>
import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'

export default {
    name: 'Chat',

    components: {
        ChatWindow
    },
    
    data() {
        return {
            messages: [],
            rooms: [
                {
                    roomId: 1,
                    roomName: 'Room 1',
                    avatar: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a1/NafSadh_Profile.jpg/768px-NafSadh_Profile.jpg',
                    index: 3,
                    users: [
                        {
                            _id: 1234,
                            username: 'John Doe',
                            avatar: 'https://upload.wikimedia.org/wikipedia/en/thumb/a/a1/NafSadh_Profile.jpg/768px-NafSadh_Profile.jpg',
                            status: {
                                state: 'online',
                                lastChanged: 'today, 14:30'
                            }
                        },
                        {
                            _id: 4321,
                            username: 'John Snow',
                            avatar: 'https://lh3.googleusercontent.com/-G1d4-a7d_TY/AAAAAAAAAAI/AAAAAAAAAAA/AAKWJJPez_wX5UCJztzEUeCxOd7HBK7-jA.CMID/s83-c/photo.jpg',
                            status: {
                                state: 'offline',
                                lastChanged: '14 July, 20:00'
                            }
                        }
                    ],
                    typingUsers: [ 4321 ]
                }
            ],
            currentUserId: 1234,
        }
    },
    
    methods: {
        fetchMessages() {
            setTimeout(() => {
                let messages = [];

                for (let i=0; i<30; i++) {
                    messages.push({
                        _id: i,
                        content: 'message 1',
                        senderId: 1234,
                        username: 'John Doe',
                        date: '13 November',
                        timestamp: '10:20',
                        system: false,
                        saved: false,
                        distributed: false,
                        seen: false,
                        disableActions: true,
                        disableReactions: true,
                    })
                }

                this.messages = messages;
            }, 2000);
        },
        sendMessage(message) {
            const m = {
                _id: this.messages.length,
                content: message.content,
                senderId: this.currentUserId,
                timestamp: new Date()
            }

            this.$set(this.messages, this.messages.length, m)
        },
    },
}
</script>

[antoine92190]

I can reproduce thanks. Will try to fix this ASAP

[antoine92190]

In the meantime, you can do:

this.messages = [...this.messages, m]

Instead of:

 this.$set(this.messages, this.messages.length, m)

[antoine92190]

Also, I'm curious about the height of your textarea.
When you get the time, could you send me a screenshot using this repo: https://github.com/antoine92190/vue-advanced-chat-sandbox

[martynishin]

hope this help

[antoine92190]

Thanks. Which browser are you using?