[Svelte 5] Form controls that bind `attrs` from `Form.Control` have broken event handlers.

[pheuter]

Describe the bug

This is a weird one that I'm able to consistently reproduce (see repro below) on latest version of Svelte 5, Superforms, Formsnap, and Bits UI. Whenever a form input binds to control attrs, which is the recommended approach, any event handlers attached to that input do not fire. However, removing the {...attrs} spread appears to work:

Broken:

<Form.Field {form} name="firstName">
    <Form.Control let:attrs>
        <Form.Label>First Name (`oninput` broken)</Form.Label>
        <Input
            {...attrs}
            bind:value={$formData.firstName}
            oninput={(e) => alert(`onchange: ${e.currentTarget.value}`)}
        />
    </Form.Control>
    <Form.FieldErrors />
</Form.Field>

Working:

<Form.Field {form} name="lastName">
    <Form.Control>
        <Form.Label>Last Name (`oninput` working)</Form.Label>
        <Input
            bind:value={$formData.lastName}
            oninput={(e) => alert(`onchange: ${e.currentTarget.value}`)}
        />
    </Form.Control>
    <Form.FieldErrors />
</Form.Field>

Reproduction

• https://stackblitz.com/~/github.com/pheuter/formcontrol-event-repro
• https://github.com/pheuter/formcontrol-event-repro

Logs

No response

System Info

System:
    OS: macOS 14.4.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 2.70 GB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    bun: 1.1.7 - ~/.bun/bin/bun
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.4.1
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.7 
    bits-ui: ^0.21.7 => 0.21.7 
    svelte: ^5.0.0-next.1 => 5.0.0-next.123

Severity

blocking an upgrade

[AdrianGonz97]

This is more of a formsnap issue than a bits-ui issue. I would transfer this over to the formsnap repo, though it doesn't look like I'm able to at the moment.

---

This one has me bit baffled. Here are some weird quirks I've observed so far:

• Commenting out/removing the <Form.FieldErrors /> component restores the behavior
• Changing attrs to a normal variable (let attrs = ...) instead of a reactive declaration ($: attr = ...) also "fixes" it, however it's not a true fix as it won't react to changes to its dependencies

With that said, I'm thinking this is may be a weird Svelte 5 issue. Can you post this issue to the Svelte 5 libraries thread?

[pheuter]

Fixed by https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0-next.127