How to ensure certain action run after DOM updates

[karchung0930]

I have a ul and I use bind:this to refer to it. The li is dynamic and the content is coming from messages.

My question is that when I add more content into messages like messages = [...messages, newContent] and I want to get the new height after the new content is refelcted in the DOM. What I do is use the getBoudingClientRect().height. But this it gives me the height before the new content is added.

I've also tried the await tick(), unfortunately it's not working too.

Below is the minimal example:

<script>
import { tick } from 'svelte';

let ulMessages;
let messages = [];

function addContent() {
    messages = [...messages, 'This is new content'];

    await tick();

    const ulHeight = ulMessage.getBoundingClientRect().height;
}
</script>

<ul bind:this={ulMessages}>
    {#each messages as message, index (index)}
        <li>{message}</li>
    {/each}
</ul>

[Prinzhorn]

What you've posted works perfectly fine for me. In the future please post a REPL and also working code (yours had two errors that failed to compile).

https://svelte.dev/repl/c045c89bbb8542e9978a8dadf7411a57?version=4.2.19

[Amjad-722]

Absolutly ,i worls perfect here