+
+
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 8d04ade60b..accb4f5714 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -11,6 +11,8 @@
import type { Gist, User } from '$lib/db/types';
import type { File } from '@sveltejs/repl';
import { browser } from '$app/environment';
+ import SelectIcon from '$lib/components/SelectIcon.svelte';
+ import { untrack } from 'svelte';
interface Props {
examples: Array<{ title: string; examples: any[] }>;
@@ -40,7 +42,7 @@
let downloading = $state(false);
let justSaved = $state(false);
let justForked = $state(false);
- let select: HTMLSelectElement;
+ let select: any; // TODO why can't i do `select: SelectIcon`?
function wait(ms: number) {
return new Promise((f) => setTimeout(f, ms));
@@ -214,7 +216,12 @@ export default app;`
// the example can be reselected
$effect(() => {
if (modified) {
- select.value = '';
+ // this is a little tricky, but: we need to wrap this in untrack
+ // because otherwise we'll read `select.value` and re-run this
+ // when we navigate, which we don't want
+ untrack(() => {
+ select.value = '';
+ });
}
});
@@ -222,27 +229,24 @@ export default app;`