Binding activeElement + removing focused element from DOM gives error

[RWDavid]

Describe the bug

I can bind to the document's active element via <svelte:document bind:activeElement />.

However, this generates a state_unsafe_mutation error when I click an element and remove it from the DOM tree.

Reproduction

REPL

<script>
	let activeElement = $state();
	let showButton = $state(true);
</script>

<svelte:document bind:activeElement />
{#if showButton}
	<button onclick={() => showButton = false}>hello</button>
{/if}

Logs

Svelte error: state_unsafe_mutation
Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state`
https://svelte.dev/e/state_unsafe_mutation

System Info

REPL version=5.25.9

Severity

annoyance

[rkhatta1]

The update to activeElement is a consequence of the focus event, which happened just before the onclick handler ran. Svelte sees this as a state mutation happening reactively within the update process triggered by the onclick, hence the "unsafe mutation" error.

It definitely could be resolved; however, it is a stretch to make changes to the runtime interactions. Here's a workaround if you've not already found one :)

I could be way off here and please correct me if that's the case. Cheers!