Memories: Klick auf Details-Tab klappt Card wieder ein #123

New issue

Closed

opened 2026-01-24 09:31:05 +00:00 by jack · 0 comments

jack commented

2026-01-24 09:31:05 +00:00

Owner

Problem

In der Memories-Ansicht kann man Observations ausklappen und dann zwischen "Narrative" und "Details" Tabs wechseln. Beim Klick auf einen Tab klappt sich die Card jedoch sofort wieder ein.

Ursache

Event-Propagation Bug.

Memories.tsx:196-197 - Die Card hat einen onClick Handler:

<div
  className="card bg-base-100 ..."
  onClick={() => setExpanded(!expanded)}
>

ObservationDetails.tsx:53-66 - Die Tab-Buttons stoppen das Event nicht:

<button
  onClick={() => setViewMode('narrative')}  // ← kein stopPropagation!
>

Das Click-Event bubbled vom Tab-Button nach oben zur Card und triggert setExpanded(!expanded), wodurch die Card wieder einklappt.

Hinweis: Die URL-Links haben bereits e.stopPropagation() (Zeile 202), aber die Tabs nicht.

Lösung

e.stopPropagation() zu den Tab-Buttons hinzufügen:

<button
  className={`tab ${viewMode === 'narrative' ? 'tab-active' : ''}`}
  onClick={(e) => { e.stopPropagation(); setViewMode('narrative'); }}
>

Betroffene Datei

packages/ui/src/components/ObservationDetails.tsx - Zeilen 53-66

## Problem In der Memories-Ansicht kann man Observations ausklappen und dann zwischen "Narrative" und "Details" Tabs wechseln. Beim Klick auf einen Tab klappt sich die Card jedoch sofort wieder ein. ## Ursache Event-Propagation Bug. **`Memories.tsx:196-197`** - Die Card hat einen onClick Handler: ```tsx <div className="card bg-base-100 ..." onClick={() => setExpanded(!expanded)} > ``` **`ObservationDetails.tsx:53-66`** - Die Tab-Buttons stoppen das Event nicht: ```tsx <button onClick={() => setViewMode('narrative')} // ← kein stopPropagation! > ``` Das Click-Event bubbled vom Tab-Button nach oben zur Card und triggert `setExpanded(!expanded)`, wodurch die Card wieder einklappt. **Hinweis:** Die URL-Links haben bereits `e.stopPropagation()` (Zeile 202), aber die Tabs nicht. ## Lösung `e.stopPropagation()` zu den Tab-Buttons hinzufügen: ```tsx <button className={`tab ${viewMode === 'narrative' ? 'tab-active' : ''}`} onClick={(e) => { e.stopPropagation(); setViewMode('narrative'); }} > ``` ## Betroffene Datei `packages/ui/src/components/ObservationDetails.tsx` - Zeilen 53-66