Text-Input als Summary verwenden

[Camping_RIDER]

Aloha ;)

for (let sum of document.querySelectorAll('summary input')) {
  sum.addEventListener('keyup',  handleInputInSummary);
}

function handleInputInSummary(event) {
  if (event.key == " " && event.target.tagName == "INPUT") {
    let d = event.target.closest("details");
    d.hasAttribute("open") ? d.removeAttribute("open") : d.setAttribute("open", "");
  }
}

Ja - die Idee dahinter ist, dass details-Element schnell wieder zuzuklappen nachdem es geöffnet wurde.

In dem Fall sogar auf eine problematische Weise, weil es immer geschlossen wird (was, wenn der User es geöffnet hatte?).

Ich habe das selbe auch schon versucht, mit einer toggle-Lösung statt always-closed.

Funktioniert, aber leider nicht wie gewünscht. Es folgt leider trotzdem ein auf-zu-flackern das stört.

Im SO Artikel werden auch Bedenken zur Accessibility geäußert, denen wird aber auch widersprochen.

Accessibility ist deshalb nicht negativ betroffen, weil man mit Tastatur immer noch den parentNode des Input errreicht und den ganz normal aufklappen kann.

Mir schwant, dass es für dieses technische Problem keine zufriedenstellende Lösung gibt. Hrmpf. Aktuell kommt mein Provisorium dem erwünschten Verhalten wohl noch am nächsten. Vielleicht muss ich doch zu einer "Was ist das?"-Lösung als summary greifen.

Grüße,

RIDER