marcel/familienarchiv
1
0
Fork 0
Code Issues 105 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(pagination): use stable key in {#each} and fix duplicate page number bug

Browse Source 
Replaces position-based key `i` with `entry === null ? 'ellipsis-' + i : entry`
so DOM reconciliation is stable when the window shifts (Decision Queue #2).

The index-based key was masking a duplicate-push bug in pageWindow: when
windowStart === first+1 or windowEnd === last-1, the loop already included that
number, causing Svelte to throw `each_key_duplicate` once stable keys are used.
Fixed the bridge-page conditions to use first+2 / last-2 thresholds so the loop
and the bridge branches never push the same page number.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-26 21:36:44 +02:00
parent 92241447ae
commit d97b62c072
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/lib/components/Pagination.svelte
View File

@@ -40,20 +40,20 @@ const pageWindow = $derived.by(() => {
result.push(first); result.push(first);
if (windowStart > first + 1) { if (windowStart > first + 2) {
result.push(null); // left ellipsis result.push(null); // left ellipsis
} else if (windowStart === first + 1) { } else if (windowStart === first + 2) {
result.push(windowStart); result.push(first + 1); // bridge: one page gap, show directly instead of ellipsis
} }
for (let p = Math.max(windowStart, first + 1); p <= Math.min(windowEnd, last - 1); p++) { for (let p = Math.max(windowStart, first + 1); p <= Math.min(windowEnd, last - 1); p++) {
result.push(p); result.push(p);
} }
if (windowEnd < last - 1) { if (windowEnd < last - 2) {
result.push(null); // right ellipsis result.push(null); // right ellipsis
} else if (windowEnd === last - 1) { } else if (windowEnd === last - 2) {
result.push(windowEnd); result.push(last - 1); // bridge: one page gap, show directly instead of ellipsis
} }
if (last > first) { if (last > first) {
@@ -105,7 +105,7 @@ const pageWindow = $derived.by(() => {
<!-- Desktop: numbered page buttons (hidden below sm:) --> <!-- Desktop: numbered page buttons (hidden below sm:) -->
<div data-testid="pagination-pages" class="hidden items-center gap-1 sm:flex"> <div data-testid="pagination-pages" class="hidden items-center gap-1 sm:flex">
{#each pageWindow as entry, i (i)} {#each pageWindow as entry, i (entry === null ? 'ellipsis-' + i : entry)}
{#if entry === null} {#if entry === null}
{#if i === 1} {#if i === 1}
<span <span