Text-Input als Summary verwenden

[Camping_RIDER]

Aloha ;)

Im verlinkten Codepen-Minimalbeispiel verwende ich ein Text-Input innerhalb eines Summary. Das Problem, auf das ich dabei stoße: eine Eingabe mit Leertaste führt nicht nur zum Einfügen eines Leerzeichens im Textfeld, sondern auch zum Aufklappen des Details-Elements.

Das würde ich gerne vermeiden ohne das Markup großartig anzupassen.

Ich habe per Javascript schon einiges versucht - aber stoße da auf unüberwindbare Probleme.

Mit stopPropagation kann ich zwar das Bubbling aufhalten, aber nicht verhindern, dass das details-Element aufklappt - weil das ja eine default-Action ist und kein Event-Aufruf.

Mit preventDefault kann ich zwar das Aufklappen aufhalten, halte damit aber gleichzeitig die Eingabe auf.

Wenn ich preventDefault verwende und das Leerzeichen dann händisch ins Textfeld einfüge verliere ich Browser-Features wie Strg+Z zum Rückgängig machen der Eingabe.

Letztere Lösung habe ich mal im Codepen hinterlegt, kann man über die Checkbox aktivieren. So geht das jetzt erstmal online... als Provisorium.

Ich bin da gerade etwas ratlos. Natürlich könnte ich workarounds finden, z.B. indem ich kein details...summary verwende, sondern was per Javascript zusammenbastle. Das ist aber nicht mein Ziel.

Prinzipiell fände ich es auch denkbar das Markup zu verändern. Wichtig wäre aus meiner Sicht, dass es im zusammengeklappten Zustand möglichst schlank bleibt. Eine Situation, dass das Eingabefeld für sich alleine steht und im Summary ein Text wie "Was bedeutet das?" steht, hätte ich natürlich ziehen können, wollte ich aber eigentlich vermeiden.

Vielleicht hat ja jemand von euch noch eine sinnvolle Lösung für mein Dilemma? Ich bin auch für Fundamentalkritik an meinem Ansatz natürlich offen.

Grüße,

RIDER