【Svelte】checkboxやradioを使用する際は bind:group ディレクティブを使用する

問題のコード

<script>
  let id;

  function handleSelectId(event) {
    id = event.currnetTarget.value;
  }
</script>
<!-- hogeList(Array)はあるアクションが実行されると更新されるものとします -->
{#each hogeList as hoge}
  <input
    type="radio"
    name="hoge"
    id="{hoge.value}"
    value="{hoge.id}"
    on:click={handleSelectId}
  >
  <label for="{hoge.value}">{hoge.body}</label>
{/each}

これが実際の動きの映像になります。（"ここTrue"という文字は無視してください🙇）
each ディレクティブ内で使用している input タグが、配列データが変わっても、 radio のチェックがされたままになってしまう事象に悩まされました。

解決後のコード

<script>
  let id;

-   function handleSelectId(event) {
-     id = event.currnetTarget.value;
-   }
</script>
<!-- hogeList(Array)はあるアクションが実行されると更新されるものとします -->
{#each hogeList as hoge}
  <input
    type="radio"
    name="hoge"
    id="{hoge.value}"
    value="{hoge.id}"
-   on:click={handleSelectId}
+   bind:group={id}
  >
  <label for="{hoge.value}">{hoge.body}</label>
{/each}

解決理由と原因は不明ですが、Svelteのディレクティブ bind:group を使用することで解決しました。

参考文献