feat: added scroll tick to update scroll when message sent

codewith-luke · Nov 6, 2023 · 2bd1014 · 2bd1014
1 parent 8e28e3c
commit 2bd1014
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/apps/client/src/lib/components/ChatArea.svelte b/apps/client/src/lib/components/ChatArea.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import {tick} from 'svelte';
     import type {IMessage} from "$lib/components/Message.svelte";
     import FileUploadInput from "./FileUploadInput.svelte";
     import EmoteActions from "./EmoteActions.svelte";
@@ -33,7 +34,7 @@
         }
     }
 
-    function handleMessageSend() {
+    async function handleMessageSend() {
         const formData = new FormData(formEl);
         const message = formData.get("message") as string;
 
@@ -46,8 +47,9 @@
         }];
 
         formEl.reset();
-        // const height = chatArea.offsetHeight;
-        console.log("offsetHeight", chatArea.offsetHeight, "scrollHeight", chatArea.scrollHeight, "clientHeight", chatArea.clientHeight)
+
+        await tick();
+
         chatArea.scrollTo({top: chatArea.scrollHeight, behavior: "smooth"});
     }
 </script>