Skip to content

bind:this={array[index]} breaks inside snippet #16421

@hyunbinseo

Description

@hyunbinseo

Describe the bug

This breaks if the <button> is converted into a #snippet and @render.

If two buttons are added (total of 3), and the middle one is deleted:

Expectation (without snippet)
buttons: [ button#1752753750393, button#1752753998281, null ]

Reality (with snippet, even after awaiting tick)
buttons: [ button#1752753750393, null, button#1752753998281 ]
<!-- without snippet -->

<script lang="ts">
  import { SvelteSet } from 'svelte/reactivity';

  let ids = new SvelteSet([Date.now().toString()]);
  let buttons: HTMLButtonElement[] = $state([]);
</script>

{#each ids as id, index (id)}
  <button
    {id}
    bind:this={buttons[index]}
    type="button"
    onclick={(e) => ids.delete(e.currentTarget.id)}
  >
    {id}
  </button>
{/each}

<button type="button" onclick={() => ids.add(Date.now().toString())}>Add</button>

Reproduction

https://svelte.dev/playground/83179835f11d4e4ca75d5a31e743d75b?version=5.36.6

Logs

System Info

-

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions