Popover content invisible with async svelte

[dylan1951]

Describe the bug

Popover content is not visible in an async component under certain conditions.

  --bits-floating-transform-origin: undefined undefined;
  --bits-floating-available-width: undefinedpx;
  --bits-floating-available-height: undefinedpx;
  --bits-floating-anchor-width: undefinedpx;
  --bits-floating-anchor-height: undefinedpx;

I opened an issue in the svelte repo and I was told to open one here instead.

Reproduction

REPL

<script>
    import { Popover } from "bits-ui";

    let value = $state();

    let foo = $derived(await value);
</script>

<input bind:value />

<Popover.Root>
    <Popover.Trigger>Open Popover</Popover.Trigger>
    <Popover.Content>
		<p>Popover Content</p>
    </Popover.Content>
</Popover.Root>

{#if value}
    <p>lol</p>
{/if}

Logs

System Info

svelte playground

Severity

blocking an upgrade

[vyconm]

[EDIT: potentially] fixed by sveltejs/svelte#17105 in Svelte 5.43.4

[sillvva]

I think the 2-way binding might be broken on the bits-ui side, async or no async. I tried this on svelte versions 5.32.0 to 5.43.4, even on sveltejs/svelte#17120 which fixes some async binding stuff.

• 5.32.0 (no async) - not working
• 5.43.4 (async enabled, but not used) - not working
• PR #17120 - not working

[huntabyte]

Nothing is broken on Bits UI side, the library is tested. If an update to a specific version of Svelte breaks functionality in Bits UI, that is a bug with Svelte and should be raised in sveltejs/svelte as a minor/patch release should not introduce a breaking change.

[sillvva]

I think you misread my post. It's not a specific svelte version. I tried svelte versions 5.32 to 5.43 and the 2-way binding is broken in all of them, async or no async. I couldn't try any older versions in the playground.

And if you compare to a custom <Details bind:open /> component, the <Popover> component is broken, but the <Details> component is working. REPL

[sillvva]

Oh! I see, it doesn't work unless there's a trigger component. Even if you're using an external button to toggle the component rather than the trigger. I did not realize that was a prerequisite.

Working

[dylan1951]

This is still broken in the latest svelte version. Here's another interesting reproduction.

REPL

This time I don't bind the open state at all.

<script>
    import { Popover } from "bits-ui";

    let value = $state();

    let foo = $derived(await value);
</script>

<input bind:value />

<Popover.Root>
    <Popover.Trigger>Open Popover</Popover.Trigger>
    <Popover.Content>
		<p>Popover Content</p>
    </Popover.Content>
</Popover.Root>

{#if value}
    <p>lol</p>
{/if}

[vyconm]

@dylan1951 again, what is this supposed to achieve?

let value = $state();

let foo = $derived(await value);

I understand that this is theorethically valid syntax, but a proper promise does not break it.

[dylan1951]

@vyconm huh, this is just a minimal reproduction. In my actual project code I have real async work and the popover has the same issue. I thought this would be more minimal and less distracting for the repro. I can make a more realistic example if that would help?

[dylan1951]

This is definitely a svelte bug since 5.43.0 so closing this issue.