Is tick still needed in component like this?

[frederikhors]

I have this Svelte 5 component.

Is there a better way to write this? Should I still use tick() with Svelte 5?

<script lang="ts">
    import type { HTMLInputAttributes } from 'svelte/elements';
    import { tick } from 'svelte';

    type Props = {
        value?: string | null;
    } & HTMLInputAttributes;

    let { value = $bindable() }: Props = $props();

    async function handleOnInput(e: Event) {
        const inputEl = e.currentTarget as HTMLInputElement;

        const start = inputEl.selectionStart!;

        const end = inputEl.selectionEnd!;

        value = value.toUpperCase();

        await tick();

        inputEl.setSelectionRange(start, end);
    }
</script>

<input type="text" oninput={handleOnInput} bind:value />

[Ocean-OS]

In Svelte 5, you can use flushSync to flush any pending effects. I'm pretty sure this is equivalent to tick except for being synchronous.

[brunnerh]

I think this function is mainly for testing (e.g.), not for general use. There is nothing wrong with using tick, either.

[brunnerh]

If you need to wait for a DOM update caused by a data change that will be synchronized by Svelte, you need something like tick.

In this case you could also set the value of the input element directly at the same time as the component property because you already have the element reference. This should allow you to drop the tick but I don't think it really matters how this is done here.

[7nik]

You can also use getter/setter to intercept binding:

<input type="text" bind:value={() => value, (v) => value = v.toUpperCase()} />

Though, it will work only if the formatted value is the same length or shorter. Otherwise, the cursor will be misplaced.