/**
 * Ein Datumsfeld, das seinen Wert auch dann anzeigt, wenn er erst später
 * eintrifft.
 *
 * DAS PROBLEM
 * -----------
 * Alle Datumsfelder der App hängen an Werten aus dem Datenkontext, und der
 * füllt sich asynchron: beim ersten Rendern steht dort ein leerer String, den
 * echten Wert bekommt das Feld erst danach. WebKit — die Engine der iOS-Hülle —
 * baut den inneren Aufbau eines `<input type="date">` beim ersten Rendern auf
 * und zieht ihn bei einer späteren Wertänderung von außen nicht zuverlässig
 * nach; sichtbar blieb „tt.mm.jjjj", und erst ein Antippen brachte das Datum
 * zum Vorschein (gemeldet vom Eigentümer, 2026-08-31: „erst beim ersten Klick
 * aufs Datumsfeld erscheinen diese korrekt").
 *
 * Verschärft wird das durch den `appearance`-Reset in screens.css, der für die
 * Box-Optik nötig ist — ohne ihn zeigt iOS sein eigenes, stark abgerundetes
 * Chrome („gestreckter Kreis statt Box").
 *
 * DIE LÖSUNG
 * ----------
 * Der Schlüssel wechselt genau einmal: von „leer" auf „gefuellt", sobald der
 * echte Wert da ist. React baut das Feld an dieser Stelle neu auf, und WebKit
 * legt seinen inneren Aufbau damit gleich mit dem Wert an.
 *
 * Bewusst NICHT der Wert selbst als Schlüssel: dann entstünde das Feld bei
 * jeder Auswahl neu, verlöre den Fokus und schlösse auf dem Telefon die
 * Datumsauswahl mitten in der Bedienung. Der Wechsel leer→gefüllt passiert
 * dagegen genau einmal, und zwar bevor jemand das Feld anfassen kann.
 *
 * Das Panel braucht das nicht: dort schreibt jedes `render()` das Markup neu,
 * das Feld entsteht also ohnehin immer mit seinem Wert.
 */

export function Datumsfeld({
  wert,
  beiAenderung,
  className = "dm-eingabe",
  ...rest
}: {
  wert: string
  beiAenderung: (wert: string) => void
  className?: string
} & Omit<
  React.InputHTMLAttributes<HTMLInputElement>,
  "value" | "onChange" | "type" | "className"
>) {
  return (
    <input
      key={wert ? "gefuellt" : "leer"}
      type="date"
      className={className}
      value={wert}
      onChange={(e) => beiAenderung(e.target.value)}
      {...rest}
    />
  )
}