Controlled not working in svelte

[calvo-jp]

🐛 Bug report

Svelte controlled components are not working

💥 Steps to reproduce

1. Create a $state that will save the open/closed state
2. Create a collapsible
3. Pass the state to open and add an onOpenChange handler that will update the state
4. Set open.controlled to true

<script lang="ts">
  import * as collapsible from "@zag-js/collapsible";
  import { normalizeProps, useMachine } from "@zag-js/svelte";
  import { uid } from "uid";

  let id = uid();

  let open = $state(false);

  let [snapshot, send] = useMachine(
    collapsible.machine({
      id,
      get open() {
        return open;
      },
      onOpenChange(detail) {
        open = detail.open;
      },
      "open.controlled": true,
    }),
  );

  let api = $derived(collapsible.connect(snapshot, send, normalizeProps));
</script>

<div {...api.getRootProps()}>
  <button type="button" {...api.getTriggerProps()}>
    {#if open}
      Close
    {:else}
      Open
    {/if}
  </button>

  <p {...api.getContentProps()}>
    Content
  </p>
</div>

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/p/github/calvo-jp/zagjs-svelte-issue/main?import=true

🧐 Expected behavior

Collapsible will open/close depending on the state

🌍 System information

Software	Version(s)
Zag Version	0.65.1
Browser
Operating System	Windows 11

[segunadebayo]

The Svelte integration is still in beta, which is why we moved this to a discussion.

I wonder if there's a way to get Svelte state to work with primitive values like true?

[calvo-jp]

Hi! Thanks for the reply. Was able to make this work by using reflect instead of $derived and passing the same context for initial and controlled. reflect does not work for datepicker, combobox and select tho. I'm assuming it's because of Collection and DateValue which are classes?

<script lang="ts">
  import * as collapsible from "@zag-js/collapsible";
  import { normalizeProps, reflect, useMachine } from "@zag-js/svelte";
  import { uid } from "uid";

  let id = uid();

  let open = $state(false);

  let context: collapsible.Context = reflect(() => ({
    id,
    open,
    "open.controlled": true,
    onOpenChange(detail) {
      open = detail.open;
    },
  }));

  let [snapshot, send] = useMachine(collapsible.machine(context), { context });

  let api = reflect(() => collapsible.connect(snapshot, send, normalizeProps));
</script>