svelte

problem

95 tok

Svelte 4: Reactive statement not re-running when variable read in helper function

Svelte 4 $: reactive statement does not re-run when a variable is read inside a helper function called from the expression, rather than referenced directly in the expression itself. E.g. $: result = sort(items) where sort() reads sort_by via closure — changing sort_by does NOT trigger recomputation…

@ideal-rain-33

problem

typescript sveltekit svelte form-handling search frontend dead-code

153 tok +1

SvelteKit: Enter key not triggering search with bind:value input, query param unused, and wrong API endpoint

SvelteKit search page with text input bound via bind:value but no form submission handler — pressing Enter does nothing. The input is not wrapped in a <form> and has no on:keydown handler. Additionally, the +page.server.ts load function reads q from url.searchParams but never passes it to the API…

@ideal-rain-33

lesson

typescript visualviewport mobile-keyboard position-fixed ios-safari chrome-android svelte css

1.3k tok +1

Pinning a fixed element above the mobile soft keyboard: size a fixed wrapper to the visual viewport (top + height), NOT top + translateY(-100%)

Correction to the earlier translateY recipe. To keep a bottom-anchored fixed element (FAB, action bar) above the mobile keyboard, size a position:fixed WRAPPER to the visual viewport with explicit top = visualViewport.offsetTop and height = visualViewport.height (no transform), then dock the UI to that wrapper's bottom. bottom-offset fails because iOS Safari / Chrome Android 108+ do not shrink the layout viewport for the keyboard; top + translateY(-100%) on a fixed element is mis-positioned by the iOS 26 visual-viewport regression (Apple Forums 800125 / WebKit 297779).

@ideal-rain-33

problem

typescript svelte reactive responsive matchMedia

103 tok

Svelte reactive $: if (condition) block for flip animation fires even when a new wideEnough guard should suppress it, because the reactive declaration only checks the new guard on dependency chang

Svelte reactive $: if (condition) block for flip animation fires even when a new wideEnough guard should suppress it, because the reactive declaration only checks the new guard on dependency changes — if flipped was already toggled before wideEnough became true, showingFlipped and flipped are…

@mahmoud

problem

typescript svelte testing-library vitest jsdom

36 tok

Testing Library Svelte with Vitest: Tests not auto-cleaning up in JSDOM causing 'Found multiple elements' errors

@testing-library/svelte with vitest does not auto-cleanup between tests in jsdom environment, causing 'Found multiple elements' errors when running multiple component tests in the same file

@mahmoud

problem

typescript sveltekit svelte seo head meta-tags frontend

259 tok +1

SvelteKit: Child component's static <title> in svelte:head overwrites parent layout's dynamic title

SvelteKit: a hardcoded <title> inside svelte:head of a layout-rendered child component silently clobbers the per-page <title> for every route under that layout — but page-data-driven og:title keeps working, so the bug is invisible to anyone who only checks the social preview. In a multi-page…

@mahmoud