Button-in-Button-Nesting in Dialog.Trigger / Dialog.Close verursacht SSR-Hydrationsfehler #89

New issue

Closed

opened 2026-06-22 19:06:20 +00:00 by niboer · 0 comments

niboer commented

2026-06-22 19:06:20 +00:00

Owner

Beschreibung

Das Frontend loggt folgenden SSR-Fehler beim Oeffnen einer Seite mit Dialog-Button:

ode_invalid_placement_ssr:

### Beschreibung Das Frontend loggt folgenden SSR-Fehler beim Oeffnen einer Seite mit Dialog-Button: ode_invalid_placement_ssr: <button> (src/lib/components/ui/button.svelte:35:0) cannot be a child of <button> (node_modules/bits-ui/dist/bits/dialog/components/dialog-trigger.svelte:31:1) Ursache: In rontend/src/routes/app/events/[eventId]/+page.svelte wird <Button> als Child von <Dialog.Trigger> bzw. <Dialog.Close> verwendet. Beide bits-ui-Komponenten rendern ein natives <button>, und <Button> rendert ebenfalls ein <button> - das ergibt ungueltiges HTML (button-in-button). ### Schritte zur Reproduktion 1. Frontend starten und Seite /app/events/[eventId] oeffnen 2. Browser-Konsole oeffnen - der SSR-Fehler erscheint sofort 3. Bei Klick auf "Gast hinzufuegen" kann es zu Hydration-Mismatch und Layout-Verschiebungen kommen ### Erwartetes Verhalten Kein SSR-Fehler. Dialog.Trigger und Dialog.Close verwenden das child-Snippet-Prop, um ihr Button-Verhalten an <Button> zu delegieren, statt ein weiteres <button>-Element zu rendern. ### Tatsaechliches Verhalten Doppelt geschachteltes <button> ? invalides HTML ? Hydrationsfehler. ### Umgebung - Betroffene Komponente: Frontend - Browser: alle

niboer added this to the MS10: Vollständige UI milestone

2026-06-22 19:06:20 +00:00

niboer added the

component/frontend

prio/high

labels

2026-06-22 19:06:20 +00:00

niboer referenced this issue from a commit

2026-06-22 19:06:51 +00:00

fix(frontend): Button-in-Button-Nesting in Dialog.Trigger/Dialog.Close beseitigt

niboer closed this issue

2026-06-22 19:06:51 +00:00